微信小程序-detail详情页数据动态展示

上一章把静态的detail页面做好了,现在来做把数据动态的放进去
首先实现点击list页面会跳转到detail页面
给list页面中添加点击事件

list.js

//点击跳转到detail页面toDetail(event){// console.log(event);//获取点击跳转对应的下标let index = event.currentTarget.dataset.indexwx.navigateTo({url: '/pages/detail/detail?index='+index,})},

上面console.log(event)的内容如下:

这样我们就把点击跳转的下标拿到并传递给detail页面了
在detail.js中获取数据,获取数据要记得先把数据引进来:

// pages/detail/detail.js
let datas = require('../../datas/list-data.js');
Page({/*** 页面的初始数据*/data: {detailObj:{},index:null},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let index=options.index;this.setData({//把引入的数据根据下标对应放到detailObj中detailObj:datas.list_data[index],//index也存放起来index:index})},

然后在detail.wxml中展示就可以了

<!--pages/detail/detail.wxml-->
<view class='detailContainer'><image class='headImg' src='{{detailObj.detail_img}}'></image><view class='avatar_date'><image src='{{detailObj.avatar}}'></image><text>{{detailObj.author}}</text><text>发布于</text><text>{{detailObj.date}}</text></view><text class='company'>{{detailObj.title}}</text><view class='collection_share_container'><view class='collection_share'><image src='/images/icon/collection-anti.png'></image><image src='/images/icon/share-anti.png'></image></view><view class='line'></view></view><button>转发此文章</button><text class='content'>{{detailObj.detail_content}}</text></view>

微信小程序-detail详情页数据动态展示相关推荐

微信小程序新闻服务器,微信小程序新闻网站详情页
扩展运算符的巧妙应用这个template模板,绑定的数据带item前缀那么使用模板的时候,也必须保证是item data帮绑定数据用双花括号包住item 还有wx:for-item默认也是item ...
微信小程序文章详情页跳转案例
前面写了一篇小程序访问公众号文章 https://www.jianshu.com/p/55701760189a 里面所有的文章列表里面都是跳转了同一篇文章链接,那么,如果所有的列表跳转详情页的时候,跳 ...
微信小程序商品详情页交互源码（选择商品类型切换、预览商品图片）
maker一下自己捣鼓的商品详情页,主要是选择商品类型的交互和样式,点击不同类型切换图片和文字,商品增加减少,还有商品预览图片(本地图片无法预览!!!).. 源码下载:http://download. ...
微信小程序播放详情页，附带：点赞.双击点赞.单击控制视频播放.上下滑动切换视频等功能
<video id="myVideo" src="{{vsrc[vid]}}" danmu-list="{ ...
微信小程序商品详情页底部弹出框（点击加入购物车或立即购买弹出）
项目实现效果如图项目效果实现思路: wxml页面设计好底部栏<加入购物车,立即购买> 绑定点击触发弹出层函数写好弹出窗效果写好原始页面暗化效果项目实现代码 1.wxml代码 (其中 ...
新闻列表页flex_微信小程序新闻网站列表页
javascript 技术文章开发微信小程序新闻网站列表页在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属 ...
微信小程序动画渐入以及动态存值setdata问题
微信小程序动画渐入以及动态存值setdata问题想要在微信小程序中制作多个元素逐一渐入的效果,效果类似下图: 首先参考微信开发文档API动画部分的内容开发文档API–动画Animation 创建动 ...
手把手教你做短视频去水印微信小程序（2-首页）
手把手教你做短视频去水印微信小程序系列教程(2-首页) 文章目录手把手教你做短视频去水印微信小程序系列教程(2-首页) 前言一.顶部banner 二.地址解析 1.整体代码 2. input框输入 ...
微信小程序云开发之数据分页云函数
微信小程序云开发之数据分页云函数 2018-10-06 20:23:28 微信小程序的云开发可以自己对数据库进行操作而不需要后台,那么很常见的一个功能就是我们在读取数据的时候需要分页来获取 ...
微信小程序突然多了好多动态_让微信小程序的登陆页面有云朵悬浮的动态效果...
微信小程序目前的火热程度相信不用多言,尤其是近期微信团队开发小程序很多之前被诟病的功能:模糊搜索,附近小程序等.最近有网友利用空余时间用小程序实现了个动态的登录页效果,所以下面我们51小程序就吧这篇文 ...

微信小程序-detail详情页数据动态展示

微信小程序-detail详情页数据动态展示相关推荐

最新文章

热门文章