列表项详情页的跳转,类似新闻列表到新闻详情的跳转
<!--
=============================
1.通过全局变量
=============================
-->
<!--获取应用的实例-->
const app = getApp()
<!--父页面-->
<!--那么可以在页面跳转的时候设计一个全局变量-->
pagesDerict:function(e){
console.log(e)
app.id = e.currentTarget.dataset.songid <!--3304-->
wx.navigateTo({
url: '../player/player'
})
}
<!--子页面-->
onLoad: function (options) {
console.log(options.id)<!--3304-->
}
<!--
=============================
1.通过url传参
=============================
-->
playsong:function(e){
<!--将元素的表示通过data-*的方式绑定成属性,然后通过dataset的方式获得,拼接在url上-->
wx.navigateTo({
url: '../player/player'+"?id="+e.currentTarget.dataset.songid<!--3304-->
})
}
<!--子页面-->
onLoad: function (options) {
console.log(options.id)<!--3304-->
)
}
但是假如wx:for项目跳转到不是同一个页面(页面相同数据不同),而是页面不同(页面结构和数据都不相同)那么上述方法就不能实现, 那么到底怎么才能实现了,回想一下,在小程序中,都是在玩数据,那么我们还是需要从数据入手,这种mvvm思想都是还要从数据入手
wx:for中的项目跳转的页面没有联系,结构和数据都不一样,怎么实现
<template name ='servicelist'>
<view class='title'><text class='title-txt'>我们提供的服务</text><text class='loadmore'>+ more</text></view>
<view class='oue-service'>
<!--在元素上绑定tap事件 bindtap='jumpToInnerPage'然后将被跳转页面的信息绑定在data-*上-->
<view class='oue-service-item' wx:for="{{serviceinfo}}" wx:key="{{index}}" data-pageid='{{item.pageUrl}}' bindtap='jumpToInnerPage'>
<view class='service-icon'>
<image src='{{item.url}}' mode='widthFix'></image>
</view>
<text class='service-name'>{{item.item}}</text>
</view>
</view>
</template>
<!--在数据中-->
servicelist:[
{
item:'网站建设',
url:'../../images/icon/servic-icon01.png',
pageUrl:'websitebuild/websitebuild'
},
{
item: '手机网站',
url: '../../images/icon/servic-icon02.png',
pageUrl: 'phonewebsite/phonewebsite'
},
{
item: '微信营销',
url: '../../images/icon/servic-icon03.png',
pageUrl: ''
},
{
item: '品牌营销',
url: '../../images/icon/servic-icon04.png',
pageUrl: ''
},
{
item: '优化推广',
url: '../../images/icon/servic-icon05.png',
pageUrl: ''
},
{
item: '软件实施',
url: '../../images/icon/servic-icon06.png',
pageUrl: ''
},
{
item: '小程序',
url: '../../images/icon/servic-icon07.png',
pageUrl: 'wechar/wechar'
},
{
item: 'VI视觉',
url: '../../images/icon/servic-icon08.png',
pageUrl: 'vi/vi'
}
]
<!--在业务层-->
jumpToInnerPage(e){
<!--通过e对象获取每个元素要跳转的页面信息,在 wx.navigateTo中进行拼接,如此就实现了跳转了-->
// console.log(e)
wx.navigateTo({
url: '../'+e.currentTarget.dataset.pageid
})
}
看看代码,其实代码写起来还是还简单,但是这种mvvm的思想没有扭过来的时候就会有一个坎。。。。