1.单向绑定
分三种情况:第一种,直接在A.js 取变量值
<!--A.wxml-->
<view>
<text wx:for="{{city}}" wx:key="index">{{item}}</text>
</view>
<!--A.js-->
Page({
data: {
city: ["北京", "上海", "广州", "香港"],
}
})
第二种,从 app.js 取全局变量:
<!--A.wxml-->
<view>
<text>{{globalVal.name}}</text>
</view>
<!--A.js-->
Page({
onLoad: function () {
this.setData({
globalVal: app.globalData.globalVal
})
}
})
<!--app.js-->
App({
globalData: {
globalVal:{name:"marc",age:16}
}
})
第三种是,在A.js 取 getStorage
<!--A.wxml-->
<view>
<text>{{date}}</text>
</view>
<!--A.js-->
Page({
onLoad: function () {
var d = new Date(),
week = "日一二三四五六";
wx.setStorage({
key: "date",
data: d.getMonth() + 1 + "月" + d.getDate() + "日,星期" + week.charAt(d.getDay())
});
var _this = this;
wx.getStorage({
key: 'date',
success: function(res) {
_this.setData({
date: res.data
});
},
})
}
})
2.双向绑定
双向绑定input、textarea
<!--A.wxml-->
<view>
<text>{{iptTxt}}</text>
<input bindinput='bindIpt' value ="{{iptTxt}}" placeholder='search'></input>
<text>{{txtBox}}</text>
<textarea bindinput='bindTxtBox' value="txtBox"></textarea>
</view>
<!--A.js-->
Page({
data: {
iptTxt:"",
txtBox:""
},
bindIpt(e){
this.setData({
iptTxt:e.detail.value
})
},
bindTxtBox(e){
this.setData({
txtBox:e.detail.value
})
}
})
3.页面传参给事件函数
小程序不支持像 vue 那样,直接在事件函数内传参: @click="getInfo(index)" ,只能加 data-index="{{index}}" 曲线传参
<!--A.wxml-->
<view>
<text wx:for="{{city}}" data-index="{{index}}" bindtap="getInfo1" wx:key="index">{{item}}</text>
<text id="transfer" data-item="{{city[0]}}" bindtap="getInfo2">测试</text>
</view>
<!--A.js-->
Page({
data: {
city: ["北京", "上海", "广州", "香港"],
},
getInfo1(e){
console.log(e.currentTarget.dataset.index)
},
getInfo2(e){
console.log(e.currentTarget.id);
console.log(e.currentTarget.dataset.item);
},
})
4.跨页传值
<!-- A.wxml -->
<view>
<view wx:for="{{city}}" wx:key="index">
<navigator url="../demo/demo?city={{item}}">{{item}}</navigator>
</view>
</view>
<!-- A.js -->
Page({
data: {
city: ["北京", "上海", "广州", "香港"],
}
});
<!-- demo.js -->
// pages/demo/demo.js
Page({
onLoad: function (options) {
console.log(options.city);
},
})
最后,再赠送一个 纯手工选项卡!
如果有幸帮到你,帮忙到个人主页 Star 一下 :https://github.com/mark-tang
听说 Star 的人马上升职加薪!Skr - skr !
<!-- A.wxml -->
<view>
<view>
<text wx:for="{{city}}" wx:key="index" data-index="{{index}}" bindtap="tabcard">{{item}}</text>
</view>
<view>
<text hidden="{{tabIndex !== index }}" wx:for="{{specialty}}" wx:key="index">{{item}}
</text><!-- 留意这里 hidden 写法,不是 wx:hidden 或者 :hidden -->
<!-- wx:if也可以,两者区别是,hidden 如字面意思只是隐藏,wx:if 则不渲染改项: -->
<!-- <text wx:if="{{tabIndex === index }}" wx:for="{{specialty}}" wx:key="index">{{item}}</text> -->
</view>
</view>
<!-- A.js -->
Page({
data: {
city: ["北京", "上海", "广州", "香港"],
specialty:["烤鸭","吴侬软语","早茶","电影"],
tabIndex: 0
},
tabcard(e){
this.setData({
tabIndex:e.currentTarget.dataset.index
})
})