小程序云开发——列表页和详情页

原创已于 2022-04-11 11:17:42 修改 · 3.7k 阅读

26 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序

于 2022-04-09 22:28:02 首次发布

笔记专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在小程序中实现列表页和详情页的获取与展示，包括在app.json中配置页面，列表页的数据获取与展示，详情页的数据获取与展示，以及列表页到详情页的跳转和数据传递。详细步骤涵盖了从资源管理器的配置到各文件的代码编写。

列表页和详情页的获取与展示，并实现跳转

1，列表页

1.1，在资源管理器找到app.json
在这里插入图片描述

在app.json的pages项增加一个数据库
放置列表的相关代码
名字按照自己的来
只要记住这个数据库是放置列表的相关代码的就行
我的是demo1-list（下面以demo1-list为例）

 "pages/demo1-list/demo1-list"

如图
找到demo1-list文件夹里的demo1-list.json
在里面设置该页面的名字

{
  "navigationBarTitleText": "商品列表"
}

1.2.在demo1-list文件夹里找到demo1-list.js
在这里插入图片描述

在demo1-list.js的page里获取集合goods里的数据
代码如下

 onLoad(){//数据获取
    wx.cloud.database().collection("goods")
    .get()
    .then(res=> {
      console.log('列表请求成功',res)
      this.setData({//把请求的数据赋值给list
        list:res.data
      })
    })
    .catch(res=> {
      console.log('列表请求失败',err)
    })
  }

全部添加完毕为

1.3.找到demo1-list文件夹里的demo1-list.wxml
在这里插入图片描述

在里面添加view板块

<view wx:for="{{list}}">
  <view bindtap="todetail" data-id="{{item._id}}">商品名：{{item.name}},价格：{{item.price}} </view>
</view>

保存运行结果为

2,详情页
2.1在app.json的pages项增加一个数据库放置详情页的代码
保存运行
（下面以demo1.1-details为例）

 "pages/demo1.1-details/demo1.1-details"

如图
在这里插入图片描述
2.2找到demo1.1-details库里的demo1.1-details.json

设置该页面的名字

{
  "navigationBarTitleText": "精品课程详情页"
}

如图
在这里插入图片描述
2.3找到demo1.1-details库里的demo1.1-details.js

在demo1.1-details.js里的page块获取goods集合的数据

Page({
  data:{
    good:{}
  },
  onLoad() {
    wx.cloud.database().collection('goods')
    .doc()
    .get()
    .then(res=>{
      console.log('精品课程详情页请求成功',res)
      this.setData({
        item:res.data
      })
    })
    .catch(res=>{
      console.log('精品课程详情页请求失败',err)
    })
  }
})

如图
在这里插入图片描述
2.4找到demo1.1-details库里的demo1.1-details.wxml

添加版块

<text>商品名:{{item.name}},价格：{{item.price}}</text>

如图
在这里插入图片描述
3，列表页与详情页的跳转
3.1找到demo1-list库里的demo1-list.js

在demo1-list.js里的page板块添加跳转到精品课程详情页的代码

todetail(n){
    console.log('跳转到详情页的id',n.currentTarget.dataset.id)
    wx.navigateTo({
      url: '/pages/demo1.1-details/demo1.1-details?id=' + n.currentTarget.dataset.id,//跳转到商品详情页，并携带商品id
    })
  }

如图
在这里插入图片描述
3.2找到demo1.1-details库里的demo1.1-details.js

在demo1.1-details.js里的page板块添加列表所携带的数据传递到onload的代码

 onLoad(options) {//列表携带的数据，传递到了onload方法里
    console.log('列表携带的值',options)
    var id = options.id

如图
在这里插入图片描述

并在单条数据查询的doc方法里加入上面要获取的id名
如图

保存运行即可
4，想要在页面展示里实现列表和详情页自由转换
在页面上方找到普通编译
在列表页的基础上，点开找到添加编译模式
把里面的模式名称改为详情页
启动页面改为pages/demo1.1-details/demo1.1-details
保存运行即可得到该页面
demo1-list.js的完整代码图为
demo1-list.json的完整代码图为
demo1-list.wxml的完整代码图为
demo1.1-details.js的完整代码图为
demo1.1-details.json的完整代码图为
demo1.1-details.wxml的完整代码图为