小程序
1超出显示滚动条
<scroll-view class="container1" scroll-y> <view>A</view> </scroll-view>
2轮播图
<swiper class="swiper-content" indicator-dots> <swiper-item> <view class="item">A</view> </swiper-item> <swiper-item> <view class="item">B</view> </swiper-item> <swiper-item> <view class="item">C</view> </swiper-item> </swiper>
3长摁复制
<text selectable></text>
<view> 手机号 <text selectable>15555555555</text> </view>
4图片宽度100%高度自适应
<image mode="widthFix" src="{{imgSrc}}"></image>
data: {
imgSrc:'http://pola.ceshidizhi.vip/static/default/images/to_03.jpg',
},
0-1之间所有小数 Math.random() * 10,
5三元运算符
<view>{{random1 >=5 ? '数字大于' : '数字小于'}}</view>
data: {
random1:Math.random() * 10
},
6按钮点击事件 bindtap
<button type="primary" bindtap="chang">+</button> <view>{{count}}</view> <button type="primary" bindtap="jian">-</button>
data: {
count:0
},
// 改变cout的值
chang(){
this.setData({
count:this.data.count + 1
})
},
jian(){
this.setData({
count:this.data.count - 1
})
},
7rich-text 一种最基本的应用场景就是从接口请求加载回来的 html 内容，显示到小程序页面上，常用商品详情等等。
<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>
8事件传参
小程序中不能事件处理函数传参（bindtap="fangfa（1）"）
小程序会吧整个当成函数名字
需要data-info="{{2}}"传参（info是参数名字）
this.setData（{}）赋新值
<button type="primary" bindtap="fangfa" data-info="{{2}}">2</button>
data: {
count:0
},
// 事件传参
fangfa(e){
this.setData({
// 传的值是多少就自增加多少
count: this.data.count + e.target.dataset.info
})
},
e.target.dataset是固定的，如果忘了就打印一下e
e.target.dataset.参数名可以获得具体参数值
9 bindinput 文本框绑定输入事件
<input type="number" bindinput="inputHandler" />
//e.detail.value变化过后 文本框最新的值（输入同时展示）
inputHandler(e){
console.log(e.detail.value)
},
appData同时修改
<input value="{{msg}}" bindinput="bindKeyInput"></input>
data: {
msg:"11"
},
bindKeyInput(e) {
this.setData({
msg: e.detail.value
})
},
