1.列表渲染
使用 wx:for-item 可以指定数组当前元素的变量名,
使用 wx:for-index 可以指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="index" wx:for-item="item" wx:key="" >
{{idx}}: {{itemName.message}}
</view>index
2.条件渲染
wx:if
在框架中,使用 wx:if="" 来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif 和 wx:else 来添加一个 else 块:
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
3.数据通信
常用post
wx.request({
url: app.globalData.webroot + '/index/user/updateUserMySubCat',
method: "post",
data: {
mySubCat: subcatArr,
uid: uid
},
header: {
'content-type': 'application/x-www-form-urlencoded' //post请求
},
success(res) {
console.log(res.data.msg);
}
})
4.标签属性
<view class="cu-item {{index==tabCur?'current ':'noselect'}}" bindtap="tabSelect" data-id="{{index}}" style="height:60rpx;line-height:60rpx;">
xxxxxxxx
</view>
注意data-xx是给当前标签赋属性 记住xx是小写,不要写大写字母
////////////// js获取属性值:
id= e.currentTarget.dataset.id;
5.跳转页面
wx.navigateTo({
url: 'test?id=1',
})
返回上一个页面
wx.navigateBack({
delta: 2
})
6.表单组件 获取到表单输入的值
6-1 textarea
<textarea bindinput="textareaAInput" maxlength="-1" value="{{content}}" placeholder="内文"></textarea>
//js内文change事件
textareaAInput:function(e){
var that = this;
var value = e.detail.value;
//字数不能超过500
if (value.length>500){
//
wx.showToast({
title: '字数不能超过500',
icon: 'none',
duration: 1000
})
return;
}
that.setData({
content: value
})
console.log('textarea发生change事件,携带value值为:', e.detail.value)
},
6-2 input type=text
<input placeholder="标题" value="{{title}}" bindinput="titleChange"/>
//js标题change事件
titleChange: function (e) {
var that = this;
var value = e.detail.value;
that.setData({
title: value
})
console.log('title发生change事件,携带value值为:', e.detail.value)
},
6-3 radio-单选按钮
<radio-group class="block" style="height:60%;" role="radiogroup" aria-label="单选区" bindchange="radioChange">
<view class=" " style="height:10rpx;top:-10%;">
<radio class="orange paddingSize" checked="{{ifselected1}}" value="1" >是</radio>
<radio class="orange paddingSize" checked="{{ifselected2}}" value="0">否</radio>
</view>
</radio-group>
//js radio发生change事件
radioChange:function(e){
var that=this;
var value = e.detail.value;
// ifselected1:true,//是否选中单选框 是
//ifselected2: false,//是否选中单选框 否
if (value==0){
that.setData({
radioValue: value,
ifselected1:false,
ifselected2: true
})
}else{
that.setData({
radioValue: value,
ifselected2: false,
ifselected1: true
})
}
console.log('radio发生change事件,携带value值为:', e.detail.value)
},
7.弹出框 相当于alert
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
wx.showToast({
title: '失败',
icon: 'none',
duration: 2000
})
-------------------------------以后还有常用的会接着补充
1744

被折叠的 条评论
为什么被折叠?



