微信小程序for循环以及页面跳转
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序for循环以及页面跳转相关的知识，希望对你有一定的参考价值。
参考技术A wxml内容：<view bindtap="a" data-f="flag">123</view>
<!-- wx:for="数组" 循环需要绑定key wx:key="index"-->
<!-- 自带定义 item 表示数组的每一项 index 表示数组的索引 -->
<!-- 使用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内容：
data:
flag:1,
list:['冰墩墩','雪融融','小泡菜'],
list:[
name:'冰墩墩',
styFlag:true
,
name:'雪融融',
styFlag:false
,
name:'小泡菜',
styFlag:false
]
,
choose:function(e)
let currentTarget: dataset:i = e;
/* 第一步获取点击的当前的内容的索引 */
console.log(i)
/* 排他 把所有的先置空 */
this.data.list.forEach(r=>
r.styFlag = false
)
this.data.list[i].styFlag = true;
/* 数据变了 视图没变 必须要使用setData实现数据和视图的双向数据绑定 */
this.setData(
list:this.data.list
)
,
a:function(e)
console.log(e)
,
效果：
wxml内容:
<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;">不带参数</button>
<button bindtap="goBack">返回上一级</button>
<!-- wx:if 和 wx:elif 以及wx:else之间不可以被其他的标签打断 -->
<block>
<view wx:if="msg=='zhangsan'" class="t">欢迎回来主人</view>
<view wx:elif="msg=='lisi'" class="t">家里水龙头没有坏不要过来</view>
<view wx:elif="msg=='24'" class="t">您好欢迎为您服务</view>
<view wx:else class="t">显示家里没人</view>
</block>
js内容：
Page(
/**
* 页面的初始数据
*/
data:
msg:""
,
goBack:function()
wx.navigateBack()
,
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options)
console.log(options.name)
/* 多次使用setData会影响性能 尽量把多次setData 使用一次setData来实现
尽量少的使用setData来提高小程序的性能 */
this.setData(
msg:options.name
)
/* 如果名字叫张三 页面显示欢迎回来主人 */
/* 如果名字叫李四 页面显示家里水龙头没有坏不要过来 */
/* 如果名字叫24号 页面显示您好欢迎为您服务 */
/* 都不是 显示家里没人 */
,
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function ()
,
/**
* 生命周期函数--监听页面显示
*/
onShow: function ()
,
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function ()
,
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function ()
,
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function ()
,
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function ()
,
/**
* 用户点击右上角分享
*/
onShareAppMessage: function ()
)
"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"
效果图：
微信小程序页面跳转的方法都有哪些
您好！很高兴能为您解答， 微信小程序 跳转页面小程序页面有2种跳转，可以在wxml页面或者js中：
1，在wxml页面中：
?
1
2
3
<navigator url="../index/index">跳转到新页面</navigator>
<navigator url="../index/index" open-type="redirect">在当前页打开</navigator>
<navigator url="../index/index" open-type="switchTab">切换到首页Tab</navigator>
2，在js页面中：
【注意】此处注意两个关键词 “应用内的页面” 和 “tabBar页面”。 app.json文件中tabBar中注册过的tab页，即为“tabBar页面”，非tabBar中注册占用的页面即为“应用内的页面” 。 如下图：home页面为“应用内的页面”,index和logs页面则为 “tabBar页面”。 参考技术A
微信小程序路由跳转，共有三种形式，页面中使用navigator组件做页面链接形式路由跳转，js中可以使用wx.navigateTo--保留当前页面，跳转到应用内的某个页面，wx.redirectTo--关闭当前页面，跳转到应用内的某个页面 wx.navigateBack()--关闭当前页面，回退前一页面。
以上是关于微信小程序for循环以及页面跳转的主要内容，如果未能解决你的问题，请参考以下文章