【微信小程序之页面跳转】从列表的item项跳转到下一个页面

本文介绍如何在微信小程序中实现列表页与详情页间的跳转,包括不同跳转方式的应用场景及具体实现步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,本文承接上一篇博客,继续分享如何从列表的item项跳转到下一个页面。

一、效果图

从左边的列表页调到右边的详情页

这里写图片描述

二、页面之间的跳转

首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择:

1、保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

wx.navigateTo({
  url: 'test?id=1'
})

2、关闭当前页面,跳转到应用内的某个页面。

wx.redirectTo({
  url: 'test?id=1'
})

3、跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

wx.switchTab({
  url: '/index'
})

注:wx.navigateBack(OBJECT)关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。

三、从列表item项跳转到下一个页面

第一步,渲染列表,在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

第二步,使用wx:key为列表中的项目绑定标识符

<view wx:for="{{array}}" wx:key="{{item.viewid}}">
  {{index}}: {{item.message}}
</view>

第三步,为每一个item对应的链接传递相应的参数,在布局页面使用navigator导航组件,指定url并为每一个item对应的链接传递相应的参数,在URL后面跟上?以及键值就行,多个参数用&连接,例如:

url="../detail/detail?index={{item.viewid}}"

四、demo源码

<view wx:for="{{words}}" wx:key="{{item.viewid}}">
    <navigator url="../detail/detail?index={{item.viewid}}">
        <view class="item-style">{{item.name}}</view>
    </navigator>
</view>
Page({
  data: {
     words: [{message: '微信小程序',viewid:'1',time:'2017-01-09 8:00:00',money:'hello'},
    {message: '微信小程序',viewid:'2',time:'2017-01-09 8:00:00',money:'hello'},
    {message: '微信小程序',viewid:'3',time:'2017-01-09 8:00:00',money:'hello'},
    {message: '微信小程序',viewid:'4',time:'2017-01-09 8:00:00',money:'hello'},
    {message: '微信小程序',viewid:'5',time:'2017-01-09 8:00:00',money:'hello'},
    {message: '微信小程序',viewid:'6',time:'2017-01-09 8:00:00',money:'hello'},
    {message: '微信小程序',viewid:'7',time:'2017-01-09 8:00:00',money:'hello'},
    {message: '微信小程序',viewid:'8',time:'2017-01-09 8:00:00',money:'hello'},
    {message: '微信小程序',viewid:'9',time:'2017-01-09 8:00:00',money:'hello'}]
  }
  ...
})
微信小程序中,完成一个商品列表展示页面通常会涉及以下几个步骤: 1. **结构设计**:首先,在`pages`目录下创建一个新的文件夹,比如`goodsList`,并在这个文件夹下创建一个名为`index.wxml`的文件,用于存放商品列表的HTML结构;另一个文件`index.wxss`用于样式设置。 ```html <!-- index.wxml --> <view class="list"> <block wx:for="{{ goods }}"> <view bindtap="goToDetail" data-goods-id="{{item.id}}"> <!-- 显示商品信息,如图片、名称和价格 --> <image src="{{item.image}}" mode="widthFix"></image> <text>{{item.name}}</text> <text>价格: {{item.price}}</text> </view> </block> </view> ``` 2. **数据绑定和事件处理**:在`index.js`中,你需要获取商品数据,并为点击事件添加处理函数`goToDetail`,它会传递商品ID到详情页。 ```javascript // index.js Page({ data: { goods: [], // 商品数组 }, onLoad: function() { this.getGoods(); // 获取商品数据 }, getGoods: function() { // 调用微信API或其他数据源获取商品列表 }, goToDetail: function(e) { const goodsId = e.currentTarget.dataset.goodsId; wx.navigateTo({ url: '../detail/detail?id=' + goodsId, // 跳转详情页 }); } }) ``` 3. **详情页面链接**:在`pages/detail`目录下创建`detail.wxml`, `detail.wxss`和`detail.js`。在`detail.js`里接收并显示商品详细信息。 4. **路由配置**:确保`app.json`中的路由配置正确,允许从列表跳转详情页。 完成以上步骤后,用户点击列表中的商品就会跳转到对应的商品详情页面
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值