微信小程序的语法和vue类似
1.变量都用{{}}包裹
2.点击事件:bindtap,方法不能加(),传参必须使用data-自定义变量名,获取参数:e.target.dataset.id
3.遍历用wx:for={{数组变量}} 遍历的值用item显示,如果要修改需要设置wx:for-item="a",之后用到item值用{{a}}表示
4.wx:if和vue的v-if一样 值为true显示,值为false隐藏
5.wx:hidden 值为true隐藏,值为false显示
6.小程序中的图片标签是image而不是img哦
7.tabBar如果需要设置至少2个,最多5个,设置在底部可以加image,设置在上方无法添加image
8.js中获取data的数据flag,this.data.flag ,设置值为this.setData({flag:"值"}),使用这个设置的值,页面才会根据数据变化渲染
9.目前微信小程序console.log输出的值有undefined有可能造成下面的代码不会执行哦,如果遇到自己代码写的没问题的注意下这点,我就被坑了一下下
下面为一个选项卡实现的例子不包含上述所有点:
wxml:
<view>
<text class="{{index == flag ? 'active':''}}" wx:for="{{list}}" bindtap="change" data-id="{{index}}" >{{item}}</text>
</view>
<view>
<text wx:for="{{list}}" wx:if="{{index == flag}}" >{{item}}</text>
</view>
js:
// pages/option/option.js
Page({
/**
* 页面的初始数据
*/
data: {
list:["选项1","选项2"],
flag:0,
},
change:function(e){
console.log(e.target.dataset.id)
this.setData({
flag: e.target.dataset.id
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
css:
.active{
background-color: blueviolet;
}
效果: