小程序实现列表和详情页

想实现如下的功能：
使用列表展示数据、点击列表中的条目，跳转到详情页。

我目前掌握的做法是：
在列表元素中增加data-id属性，用来存放唯一标识，然后传递参数到详情页。

下面的官方文档解释：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

每个列表元素要有一个可以进行定位的值，这里就是data-id

列表页

<!--pages/shici/shici.wxml--><mp-cells  ext-class="my-cells" title="诗词列表"><mp-cell bindtap="onClick"  wx:for="{{dataList}}"  wx:key="_id" data-id="{{item._id}}" value="{{item.title}}" footer="{{item.author}}"></mp-cell></mp-cells>

onClick:function(e){let myId = e.currentTarget.dataset.id;    wx.navigateTo({url: '/pages/shicidetail/shicidetail?id=' + myId,})
}

onLoad: function (options) {console.log(options)let myId = options.id;}

列表详情页

小程序实现列表和详情页相关推荐

微信小程序新闻列表及详情页
微信小程序新闻列表及详情页页面效果新闻列表 <view class="conatiner"><view class="news-item" ...
微信小程序实战篇-商品详情页（二）
今天要讲解商品详情页中sku的弹出选着框,这个涉及css动画样式,css动画是新的知识点,我们之前并没有接触过,请大家做好笔记,我们要做的效果是酱紫的~ 这个布局难点是需要绘制一个阴影背景.弹出的动画 ...
电商小程序实战教程-商品详情页开发
我们上一篇开发了电商小程序的首页,本篇我们介绍一下详情页的开发.如果想开发详情页,首先要搞明白一个概念,在详情页展示数据的时候需要如何进行页面传参. 参数变量在微搭中变量一共是分三种,普通变量.模型 ...
微信小程序开发--首页及详情页开发
一.常用组件在之前的封装请求数据的模块中请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.轮播图数据的请求pages/index/index.js data: {bannerlist:[] / ...
微信小程序商城开发-商品详情页跳转购物车
项目场景: 微信小程序商城开发中商品详情页中购物车页面的跳转(仅限于tabbar页面的跳转) 问题描述点击商品详情页中的购物车图标跳转不到tabbar及导航栏中的购物车页面,总是报错原因分析: 微 ...
微信小程序实战篇-商品详情页（一）
哈喽,大家好,今天要进入新篇章啦,商品详情页,这个可是个大模块,要分好几次才能讲解清楚,现在我们先进行第一讲,老规矩,先上效果图有木有很酷炫啊,下面由代码君教你如何实现. 详情页布局看效果图,可以 ...
电商小程序实战教程-商品详情页
电商小程序实战教程第一章总体介绍第二章创建数据源第三章创建管理后台第四章首页的创建第五章分类导航前言我们已经完成了首页和分类导航页面的开发,本节我们介绍一下商品详情页的开发.商 ...
php做一个详情页面,微信小程序实现头条新闻详情页图文显示功能的实例详解
众所周知,微信小程序编译好后是不能解析HTML标签的,那么问题来了:后台中通过所见即所得编辑器编辑的图文并茂的文章如何在微信小程序端也能显示呢?这就是本文要讨论的主题. 本文内容如下一.如何解析HT ...
【小程序开发之文章详情页面的设计】文章详情页面如何布局
本篇博客是小程序开发系列的第四篇,在上一篇博客中介绍的是首页的制作,除了展示轮播图图片,食谱的封面.名称以及文章的封面和标题这些静态的东西之外我们还需要在点击它们的时候能够跳转到详情页面. 除了在首页 ...
微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...

小程序实现列表和详情页

小程序实现列表和详情页相关推荐

最新文章

热门文章