保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；
如 'path?key=value&key2=value2'
eg:
wx.navigateTo({
url:'test?id=1'
})
这种跳转方式默认有返回按钮，返回到上一个页面
关闭当前页面，跳转到应用内的某个页面。
需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；
如 'path?key=value&key2=value2'
eg:
wx.redirectTo({
url:'test?id=1'
})
这种跳转方式默认有返回按钮，返回到上一个页面的再上一层
需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；
如 'path?key=value&key2=value2'，如果跳转的页面路径是 tabBar 页面则不能带参数
eg:
wx.reLaunch({
url:'test?id=1'
})
这种跳转方式默认没有返回按钮，不需要默认返回按钮的页面就可以使用这个api了
需要跳转的 tabBar 页面的路径（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数
{
"tabBar": {
"list": [{
"pagePath":"index",
"text":"首页"
},{
"pagePath":"other",
"text":"其他"
}]
}
}
wx.switchTab({
url:'/index'
})
我们需要调转到tabbar定义的页面的时候，就需要这个api了。踩过这个坑的人就知道，除了这个api，其他的都不能跳转到tabar定义过的页面
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。
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"
}
效果图：
效果展示通过使用事件中心的查询事件，配置一个活动列表展示页。
参考文章“网页链接”，同时配置界面跳转和跳转页面的数据绑定完成活动详情页的展示。
创建数据表注意：在数据中心你可以创建属于自己应用程序的数据表格。数据表格类型分为用户表、商品表、订单表和自定义表。
在活动数据表，新增一个富文本字段“活动详情”
触发器配置注意：在检查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。
选中循环容器的列表条目。
点击检查面板中的触发器。
创建触发器。
绑定数据注意：排定数据可以将事件返回的数据和组件显示内容进行绑定。
选中图片组件。
点击检查面板中的数据绑定与设置。
绑定数据。
选中标签文本组件。
点击检查面板中的数据绑定与设置。
绑定数据。
选中富文本组件。
点击检查面板中的数据绑定与设置。
绑定数据。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）