站长圈

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

  • 时间:2019-08-08 11:13 编辑:祈澈姑娘 来源:简书 阅读:264
  • 扫一扫,手机访问
摘要:1:实战六之中,列表页已经完成,现在新建一个详情页,打开app.json,"pages/details/details",,自动生成了一个详情页2:打开首页列表页代码,绑定详情按钮跳转事件wxml:<view wx:for="{{book_list}}">&n

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

0.jpg

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>


1.jpg

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

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

2.jpg

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

3.jpg

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

4.jpg

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

5.jpg

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

6.jpg

所以js里面声明一下

 var id = event.currentTarget.dataset.id;

7.jpg

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

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


8.jpg

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


9.jpg

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

开始写详情页的一些代码

1:初始化db的实例

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


10.jpg

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

11.jpg

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

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


12.jpg

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

13.jpg

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

// pages/details/details.jsconst 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


14.jpg

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

15.jpg

4:效果如下

16.jpg










  • 全部评论(0)
资讯详情页最新发布上方横幅
最新发布的资讯信息
【计算机/互联网|多媒体】微信小程序入门与实战音乐素材(2019-08-15 18:58)
【计算机/互联网|程序设计开发】小程序云开发实战七:云开发首页列表跳转详情页(2019-08-08 11:13)
【计算机/互联网|程序设计开发】小程序云开发实战六:云数据库读取的数据显示在小程序端列表里(2019-08-08 11:06)
【计算机/互联网|程序设计开发】小程序云开发实战五:如何将获取到的API数据存入云数据库里面(2019-08-08 10:59)
【计算机/互联网|程序设计开发】小程序云开发实战四:调用豆瓣API获取具体的数据(2019-08-08 10:35)
【计算机/互联网|程序设计开发】第 2 章:初始化微信小程序蓝牙适配器(openBluetoothAdapter)——蓝牙教程(2019-08-07 17:34)
【计算机/互联网|程序设计开发】第 1 章:新建微信小程序项目——蓝牙教程(2019-08-07 17:21)
【计算机/互联网|程序设计开发】微信小程序蓝牙教程之前言(2019-08-07 17:16)
【计算机/互联网|程序设计开发】小程序云开发实战三:编写云函数代码(2019-08-07 11:04)
【计算机/互联网|程序设计开发】小程序云开发实战二:小程序云开发云函数安装依赖步骤(2019-08-07 10:06)
网站首页  |   关于我们  |   广告合作  |   联系我们  |   隐私条款  |   免责声明
CopyRight 2014-2024 站长圈 | ICP证:粤ICP备16065033号-15
联系客服
技术咨询 售前小郑 客服鸯鸯 联系客服
0769-33314958
手机版

扫一扫进手机版
返回顶部