专栏首页编程微刊小程序云开发实战七:云开发首页列表跳转详情页

小程序云开发实战七:云开发首页列表跳转详情页

1:实战六之中,列表页已经完成,现在新建一个详情页,打开app.json,"pages/details/details",,自动生成了一个详情页

2:打开首页列表页代码,绑定详情按钮跳转事件 wxml:

<view wx:for="{{book_list}}">
  <van-card num="2" price="{{item.price}}" desc="{{item.author}}" title="{{item.title}}" thumb="{{item.image }}">
    <view slot="footer">
      <van-button size="mini" bind:click="viewitem">详情按钮</van-button>
    </view>
  </van-card>
</view>

3:继续写js里面的绑定事件,在控制台打印一下event,方便后续测试

  viewitem: function(event) {
    console.log(event)
  }

4:如何知道要跳转列表图书中的哪个详情页?要在云开发里面写一个特定的id,打开云开发控制台,数据库,需要用到这个下划线是_id的字段

5:给这个字段设置一个值,data-id="{{item._id}}"

图片.png

点击按钮,可以看到,点击不同的列表,打印的是不同的id,通过不同的id就可以看到不同的内容了。

6:下面实现点击详情按钮跳转详情页面,看到想要的具体的内容,看完控制台,因为具体数据是来自于event,currentTarget

所以js里面声明一下

 var id = event.currentTarget.dataset.id;

并且写好跳转页面的跳转方法和url,带参数跳转

7:在detail.js的onLoad方法里面打印接收到的参数

8:测试,列表界面带参数跳转成功

分割线======分割线=======分割线=======分割线

开始写详情页的一些代码

1:初始化db的实例

const db = wx.cloud.database({});

2:打开云函数文档里面的读取数据apihttps://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html 复制此段读取数据记录的代码,放在onload里面

   onLoad: function (options) {
   // console.log(options)
    db.collection('books').doc(options.id).get({
      success(res) {
        // res.data 包含该记录的数据
        console.log(res.data)
      }
    })
  },

可以看到,具体数据已经打印过来了

图片.png

这个时候还没有将数据传递到一个具体的页面实例中

所以,success开始改成使用箭头函数

// pages/details/details.js
const db = wx.cloud.database({});
Page({
  /**
   * 页面的初始数据
   */
  data: {

  },
  onLoad: function (options) {
    //  console.log(options)
    db.collection('books').doc(options.id).get({
      success: res => {
        console.log(res.data)
        this.setData({
          book: res.data
        })
      }
    })
  },
})

ok,进入页面的时候,可以看到appdata里面的book

3:具体展示 在wxml里面写上想要拿到的数据,ok,详情页面展示的数据

4:效果如下

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序云开发实战七:云开发首页列表跳转详情页

    1:实战六之中,列表页已经完成,现在新建一个详情页,打开app.json,"pages/details/details",,自动生成了一个详情页

    王小婷
  • uniapp带参数跳转,新页面接收参数

    1:index.vue的页面,在按钮上绑定点击事件,将所要传递的参数放在点击事件的方法里面。

    王小婷
  • Highcharts使用的一些总结

    Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提...

    王小婷
  • 小程序云开发实战七:云开发首页列表跳转详情页

    1:实战六之中,列表页已经完成,现在新建一个详情页,打开app.json,"pages/details/details",,自动生成了一个详情页

    王小婷
  • Web前端学习 第9章 教务管理系统开发5 前端代码讲解

    导航守卫主要用于实现在页面发生跳转时,检测token的存在,如果token没有或失效,网页则回到登录页面,代码如下。

    学习猿地
  • 【融职培训】Web前端学习 第9章 教务管理系统开发5 前端代码讲解

    导航守卫主要用于实现在页面发生跳转时,检测token的存在,如果token没有或失效,网页则回到登录页面,代码如下。

    学习猿地
  • 我最喜欢的Mybatis 3.5新特性!超实用!

    Mybatis 3.5 发布有段时间了,终于支持了 Optional ,这么实用的特性,竟然还没人安利……于是本文出现了。

    用户1516716
  • vue系列教程之微商城项目|导航栏组件封装

    1) 在components文件下新建navBar文件夹和 navBar.vue文件

    算法与编程之美
  • 苹果2017发布会直击:是的我们AI论文发的少,但我们有iPhone X啊

    大数据文摘
  • 通过调试获得SAP Fiori gateway系统的系统ID

    For example if you are working on this url: https://jerry.sap.corp:4080/sap/bc/u...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券