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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ios 技术积累

ios 百度地图获取GPS

百度地图默认返回 百度经纬度坐标,如需要返回GPS坐标则设置CoordinateType

11910
来自专栏大数据钻研

前端工程师如何干掉设计

前端是一个承上启下的职位,正因为其位置的特殊性导致其必须了解设计和后台的一些基本知识。本文并非教大家如何取代设计的工作,而是讲解前端如何更快更便捷的实现一些简单...

36540
来自专栏大数据钻研

从事Java软件开发工程师所需的职业素质

过去,Java开发人员都是依赖Web浏览器作为应用程序的前端。但过程往往令人沮丧:HTML笨拙,JavaScript缓慢而难用,缺乏调试工具,想让应用程序兼容所...

313110
来自专栏较真的前端

《React in patterns》 中文版来了

20940
来自专栏编程直播室

《使用 Angular2+ 开发 Markdown 编辑器》提纲

17820
来自专栏互联网杂技

HTML5干货』响应式布局的设计方法和响应式前端优化

作为一名优秀的web前端人员,不懂响应式布局怎么可以呢? 今天跟大家分享web前端开发和设计的干货。关于响应式布局的设计方法和响应式前端优化。 我们都知道,目...

555120
来自专栏BeJavaGod

Java后端实现图片压缩技术(赞赏功能已开通,欢迎测试,噗~!)

今天来说说图片压缩技术,为什么要使用图片压缩,图片上传不就完事了吗?对的,这在几年前可以这么说,因为几年前还没有现在这么大的并发,也没有现在这么关注性能。 如今...

48450
来自专栏前端笔记

【WP主题】Kratos 文章样式使用说明 。

为了拓展 WordPress 原有的文章编辑器功能,三哥额外添加了一些配合主题使用的小功能(网易云音乐、优酷视频、腾讯视频、哔哩哔哩、Youtube、进度条、下...

43990
来自专栏腾讯社交用户体验设计

[ISUX转译]iOS 9人机界面指南(一)上篇:UI设计基础 - 腾讯ISUX

28440
来自专栏腾讯大讲堂的专栏

玩转HTML5移动页面(优化篇)

承接上期讲堂君推荐的《玩转HTML5移动页面(动效篇)》,动效篇说的是让页面动起来的一些小技巧。 而页面动起来的根基是功能可用的页面,因此有必要分享一些优化细...

68470

扫码关注云+社区

领取腾讯云代金券