微信小程序列表点击跳转对应详情页

本文介绍了一种在小程序中从列表页向详情页高效传递多个参数的方法,通过使用data-属性绑定和缓存,避免了多次数据请求,提升了用户体验。

2020/9/1:这种写法能实现但是用了多次缓存,后面发现其实是可以用自定义属性来传参的,具体有空我会写出来

效果展示:

 

列表页js部分:

onLoad: function(options) {

    var that = this;

    wx.request({

      url: '你的接口',

      data: {

          接口参数

      },

      header: {

          'content-type': 'application/json', // 默认值

      },

      success: function (res) {

          console.log(res.data);

          that.setData({

            你定义的变量名: res.data,

          })

      }

    })

  },

跳转详情页方法

 viewDetail: function(e) {

    let newsid = e.currentTarget.dataset.id || '';

    let newsTitle = e.currentTarget.dataset.newstitle || '';

    let newsAuthor = e.currentTarget.dataset.newsauthor || '';

    let newsDescription = e.currentTarget.dataset.newsdescription || '';

    let newsCreateTime = e.currentTarget.dataset.newscreatetime || '';

    let newsContentText = e.currentTarget.dataset.newscontenttext || '';

    let newsInfoSource = e.currentTarget.dataset.newsinfosource || '';//你想传递的值

    //放入缓存

    wx.setStorage({

      key: '你定义key的名程',

      data: {

        newsid,

        newsAuthor,

        newsTitle,

        newsDescription,

        newsCreateTime,

        newsContentText,

        newsInfoSource

      },

      success: function () {

        wx.navigateTo({

          url: '../news_home/Detail/Detail?newsid='  + newsid + "&newsTitle" + newsTitle + "&newsAuthor" + newsAuthor

          + "&newsDescription" + newsDescription + "&newsCreateTime" + newsCreateTime + "&newsContentText" + newsContentText

          + "&newsInfoSource" + newsInfoSource

        })

      }

    })

  },

 

列表页wxml:

用data-绑定传递

 <view class='' bindtap='viewDetail' data-newsid='{{item.newsid}}' data-newstitle='{{item.Title}}' data-newsauthor='{{item.Author}}' data-newsdescription='{{item.Description}}' data-newscreatetime='{{item.CreateTime}}' data-newscontenttext='{{item.ContentText}}' data-newsinfosource='{{item.InfoSource}}'>

                <view style="width:100%">标题:{{item.Title}}</view>

                <view style="width:100%">作者:{{item.Author}}</view>

                <view style="width:100%">发布时间:{{item.CreateTime}}</view>

          </view>

 

详情页js:

从缓存中拿取数据

onShow: function () {

    let that = this;

    // 从缓存中获取

    wx.getStorage({

      key: '你定义key的名字',

      success: function (res) {

        that.setData({

          newsTitle: res.data.newsTitle,

          newsAuthor:res.data.newsAuthor,

          newsDescription:res.data.newsDescription,

          newsCreateTime:res.data.newsCreateTime,

          newsContentText:res.data.newsContentText,

          newsInfoSource:res.data.newsInfoSource

        })

      },

    })

  },

 

详情页xwml:

      <view>{{newsInfoSource}}</view>

 

### 微信小程序中实现跳转到商品详情页的方法 在微信小程序开发中,实现从商品列表页面跳转到商品详情页的功能,通常需要结合 `wx.navigateTo` 方法和数据传递来完成。以下是实现该功能的具体方式: #### 1. 商品列表页面(index.js) 在商品列表页面中,通过绑定点击事件,将商品的唯一标识(如 `goods_id`)传递到详情页。以下是一个示例代码: ```javascript Page({ data: { goodsList: [ { id: 1, name: '手机A', price: 2999, desc: '高性能手机' }, { id: 2, name: '手机B', price: 3999, desc: '旗舰级体验' } ] }, // 点击跳转到商品详情页 navigateToDetail(event) { const goodsId = event.currentTarget.dataset.id; // 获取商品ID wx.navigateTo({ url: `/pages/goods_detail/goods_detail?goods_id=${goodsId}`, // 拼接URL参数 }); } }); ``` #### 2. 商品详情页面(goods_detail.js) 在商品详情页面中,通过 `onLoad` 生命周期函数获取传递过来的商品ID,并根据ID请求对应的商品详细信息。 ```javascript Page({ data: { goods_info: {} }, onLoad(options) { const goodsId = options.goods_id; // 获取传递的 goods_id 参数 this.getGoodsDetail(goodsId); // 调用方法获取商品详情 }, // 请求商品详情数据 async getGoodsDetail(goods_id) { const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id }); if (res.meta.status !== 200) return uni.$showMsg(); // 错误处理 this.setData({ goods_info: res.message }); // 更新数据 } }); ``` #### 3. 页面配置(app.json) 确保在 `app.json` 中正确配置了商品列表页和详情页的路径。 ```json { "pages": [ "pages/index/index", "pages/goods_detail/goods_detail" ] } ``` #### 4. 商品详情页 UI 渲染 在商品详情页的 WXML 文件中,可以使用动态绑定的方式渲染商品的图片、价格、描述等信息。 ```xml <view class="goods-detail"> <!-- 轮播图 --> <swiper indicator-dots="{{true}}" autoplay="{{true}}"> <block wx:for="{{goods_info.pics}}" wx:key="pic_id"> <swiper-item> <image src="{{item.pics_big}}" mode="aspectFill"></image> </swiper-item> </block> </swiper> <!-- 商品价格 --> <view class="price">¥{{goods_info.goods_price}}</view> <!-- 商品描述 --> <view class="description">{{goods_info.goods_introduce}}</view> </view> ``` --- ### 注意事项 - 在传递参数时,确保 URL 中的参数名称与接收页面的逻辑一致[^5]。 - 使用 `wx.navigateTo` 方法时,目标页面必须是非 tabBar 页面;如果是 tabBar 页面,则需要使用 `wx.switchTab` 方法[^3]。 - 商品详情数据的获取可以通过接口调用实现,也可以在本地模拟数据进行测试[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值