首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >wx-for的item中怎么实现不同页面的跳转

wx-for的item中怎么实现不同页面的跳转

作者头像
天天_哥
发布2018-09-29 14:46:10
1.3K0
发布2018-09-29 14:46:10
举报
文章被收录于专栏:天天天天
1.第一种情况

列表项详情页的跳转,类似新闻列表到新闻详情的跳转

<!--
=============================
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思想都是还要从数据入手

2第二种情况

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的思想没有扭过来的时候就会有一个坎。。。。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.08.03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.第一种情况
  • 2第二种情况
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档