微信小程序实例:详情页数据动态实现的方法介绍

时间:2020-09-15 18:30:07 作者:重庆seo小潘 来源:
本篇文章给大家带来的内容是关于微信小程序实例:detail详情页数据动态展示的方法介绍 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 上一篇文章微信小程序实例:详情页静态页面搭建的方法介绍把静态的detail页面做好了,现在来做把数据

本篇文章给大家带来的内容是关于微信小程序实例: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.jslet 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>相关推荐:

微信小程序实现动态设置页面标题方法分享

微信小程序 数据访问实例详解以上就是微信小程序实例:详情页数据动态实现的方法介绍的详细内容,更多请关注小潘博客其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件联系站长,一经查实,本站将立刻删除。

本文地址: http://www.hkxiaopan.com/column/xiaopan/51463.html

(0)

相关推荐

  • 微信更新,这功能回来了

    果粉俱乐部 让科技更好的服务生活 点击上方「蓝字」加入我们 到了年末,微信最近的更新频率比平时快了不少. 1 月 21 日,iOS 微信发布了「十周年」版本 8.0,带来了一大波新功能,包括大家玩的不 ...

  • 微信小程序云开发修改数据学习心得

    根据要修改的ID定位到那条数据,然后用update方法修改数据. 微信小程序中代码如下 Index.xwml <!-- 修改数据 --> <input placeholder=&qu ...

  • 小白被动收入项目,每天搬运日赚200+

    小白被动收入项目,每天搬运日赚200+ 大家好,我是独孤求胜,公众号独孤思维.今天是原创日更105篇. 今天是五一劳动节,首先祝大家节日快乐! 昨天分享的网站搭建项目<稳赚不赔的项目,简单搬运就 ...

  • 微信扫码支付的钱能追回吗

    有时候在付钱的时候不小心手抖多付了,那微信扫码支付的钱能追回吗,让我们一起来看看吧. 扫码付款成功资金会即时入账到收款方的零钱账户,支付成功后不支持人工撤销,需要联系对方退回.可以查看扫码支付的账单详 ...

  • 微信健康卡怎么办理

    现在微信可以办理健康卡了,你们知道吗?微信办理健康卡有哪些流程,今日小编带来的这篇文章就为大伙分享了微信上怎么办健康卡的详细教程,一起来看看吧. 1.首先打开微信APP,然后点击页面底部的发现图标. ...

  • (14条消息) 微信小程序如何实现列表数据的详情页功能

    <!--pages/detail/detail.wxml--> <view class="detailContainer"> <image class ...

  • 微信小程序云开发删除数据学习心得

    根据要删除的ID定位到那条数据,然后用remove方法删除数据. 微信小程序中代码如下 Index.xwml <!-- 删除数据 --> <input placeholder=&qu ...

  • 微信小程序云开发查询数据学习心得

    点击查询出所有数据 微信小程序中代码如下 Index.xwml <button bindtap="getData" type="primary">查 ...

  • 微信小程序云开发添加数据学习心得

    学习来源:https://www.bilibili.com/video/BV1pE411C7Ca?p=6 微信小程序中代码如下 Index.xwml <!-- 添加数据 --> <i ...

  • 微信小程序商城开发之动态API实现商品的详情页示例

    发布时间:2021-01-28 13:55:31 来源:亿速云 阅读:113 作者:小新 栏目:移动开发 这篇文章主要介绍了微信小程序商城开发之动态API实现商品的详情页示例,具有一定借鉴价值,感兴趣 ...

  • 微信小程序之分类详情页

    上期我们写了静态分类的普通界面了,现在我们需要写跳转进入书籍详细信息页的静态页面了. 如果你想设置顶部导航标题栏的话,可以在json里设置 这样点进去的话就导航栏就会显示出书本详情的标题了. 好了,言 ...

  • (14条消息) 微信小程序入门学习,借助云开发动态更换swiper图片数据,小程序轮播图动态更新

    其实思路很简单 1,小程序里定义swiper组件 2,动态请求swiper要显示的图片资源 3,把图片资源组装成数组,并把数据绑定到swiper轮播图组件里. 我们这里的数据获取,可以自己服务器后台配 ...

  • 微信小程序实现滑动翻页效果(完整代码)

    这篇文章主要介绍了微信小程序实现滑动翻页效果,本文通过效果图展示实例代码讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 微信小程序实现滑动翻页效果,效果图如下所示: 源码: <vi ...