1.微信小程序循環(huán)：
wxml內(nèi)容：
<view?bindtap="a"?data-f="{{flag}}">123</view>
<!--?wx:for="{{數(shù)組}}"?循環(huán)需要綁定key?wx:key="index"-->
<!--?自帶定義?item?表示數(shù)組的每一項?index?表示數(shù)組的索引?-->
<!--?使用wx:for-item修改每一項值的key?-->
<!--?使用wx:for-index修改每一項值的index?-->
<view?wx:for="{{list}}"?class="t"?wx:key="i"?
????wx:for-item="r"?wx:for-index="i"
????style="color:{{r.styFlag?'red':''}};"
????data-i="{{i}}"
????bindtap="choose"
>
????{{r.name}}--{{i}}
</view>
js內(nèi)容：
data:?{
????????flag:1,
????????list:['冰墩墩','雪融融','小泡菜'],
????????list:[{
????????????name:'冰墩墩',
????????????styFlag:true
????????},{
????????????name:'雪融融',
????????????styFlag:false
????????},{
????????????name:'小泡菜',
????????????styFlag:false
????????}]
????},
????choose:function(e){
????????let?{?currentTarget:{?dataset:{i}?}?}?=?e;
????????/*?第一步獲取點擊的當(dāng)前的內(nèi)容的索引?*/
????????console.log(i)
????????/*?排他?把所有的先置空?*/
????????this.data.list.forEach(r=>{
????????????r.styFlag?=?false
????????})
????????this.data.list[i].styFlag?=?true;
????????/*?數(shù)據(jù)變了?視圖沒變?必須要使用setData實現(xiàn)數(shù)據(jù)和視圖的雙向數(shù)據(jù)綁定?*/
????????this.setData({
????????????list:this.data.list
????????})
????},
????a:function(e){
????????console.log(e)
????},
效果：
2.頁面跳轉(zhuǎn)：
wxml內(nèi)容:
<button?bindtap="go1"?style="margin:?3px;">張三</button>
<button?bindtap="go2"?style="margin:?3px;">李四</button>
<button?bindtap="go3"?style="margin:?3px;">24號</button>
<button?bindtap="go4"?style="margin:?3px;">不帶參數(shù)</button>
<button?bindtap="goBack">返回上一級</button>
<!--?wx:if?和?wx:elif?以及wx:else之間不可以被其他的標(biāo)簽打斷?-->
<block>
????<view?wx:if="{{msg=='zhangsan'}}"?class="t">歡迎回來主人</view>
????<view?wx:elif="{{msg=='lisi'}}"?class="t">家里水龍頭沒有壞不要過來</view>
????<view?wx:elif="{{msg=='24'}}"?class="t">您好歡迎為您服務(wù)</view>
????<view?wx:else?class="t">顯示家里沒人</view>
</block>
js內(nèi)容：
Page({
????/**
?????*?頁面的初始數(shù)據(jù)
?????*/
????data:?{
????????msg:""
????},
????goBack:function(){
????????wx.navigateBack()
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面加載
?????*/
????onLoad:?function?(options)?{
????????console.log(options.name)
????????/*?多次使用setData會影響性能?盡量把多次setData?使用一次setData來實現(xiàn)
????????盡量少的使用setData來提高小程序的性能?*/
????????this.setData({
????????????msg:options.name
????????})
????????/*?如果名字叫張三?頁面顯示歡迎回來主人?*/
????????/*?如果名字叫李四?頁面顯示家里水龍頭沒有壞不要過來?*/
????????/*?如果名字叫24號?頁面顯示您好歡迎為您服務(wù)?*/
????????/*?都不是?顯示家里沒人?*/
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
?????*/
????onReady:?function?()?{
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面顯示
?????*/
????onShow:?function?()?{
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面隱藏
?????*/
????onHide:?function?()?{
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面卸載
?????*/
????onUnload:?function?()?{
????},
????/**
?????*?頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
?????*/
????onPullDownRefresh:?function?()?{
????},
????/**
?????*?頁面上拉觸底事件的處理函數(shù)
?????*/
????onReachBottom:?function?()?{
????},
????/**
?????*?用戶點擊右上角分享
?????*/
????onShareAppMessage:?function?()?{
????}
})
3. tabBar使用：
注意：在app.json里面配置 tabBar
{
??"pages":?[
????"pages/index/index",
????"pages/forpage/forpage",
????"pages/mypage/mypage",
????"pages/logs/logs",
????"pages/fenglei/fenglei"
??],
??"window":?{
????"backgroundTextStyle":?"dark",
????"navigationBarBackgroundColor":?"#FF0000",
????"navigationBarTitleText":?"kw47page",
????"navigationBarTextStyle":?"white"
??},
??"tabBar":?{
????"color":?"#fff",
????"selectedColor":?"#FFCA28",
????"backgroundColor":?"#000",
????"list":?[{
??????"pagePath":?"pages/index/index",
??????"text":?"首頁",
??????"iconPath":?"",
??????"selectedIconPath":?""
????},?{
??????"pagePath":?"pages/logs/logs",
??????"text":?"日志",
??????"iconPath":?"",
??????"selectedIconPath":?""
????}]
??},
??"style":?"v2",
??"sitemapLocation":?"sitemap.json"
}
效果圖：
