开始前，请先完成圆梦宝典中滚动公告栏的开发，详见
【微信小程序-原生开发】实用教程 08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏_朝阳39的博客-CSDN博客
https://blog.csdn.net/weixin_41192489/article/details/128797403
需求描述
为了让首页展现更多功能，我们添加了可滚动的选项，实现首页内容的无限拓展和切换。
可滚动选项
pages\index\index.wxml
<t-tabs space-evenly="{{false}}" sticky defaultValue="{{defaultIndex}}" theme="tag" bindchange='indexChange'> <t-tab-panel wx:for="{{tabList}}" wx:key="index" label="{{item.label}}" value="{{item.index}}" /> </t-tabs>
- sticky 页面下滑时，让选项自动悬浮在顶部
space-evenly="{{false}}"取消选项均分空间theme="tag"使用标签样式
详细文档见
https://tdesign.tencent.com/miniprogram/components/tabs?tab=api
pages\index\index.json
"t-tabs": "tdesign-miniprogram/tabs/tabs", "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
pages\index\index.js
data 中新增变量
currentIndex: 1, defaultIndex: 1, tabList: [{ index: 0, label: '新年贺词' }, { index: 1, label: '动态' }, { index: 2.1, label: '电视剧' }, { index: 2.2, label: '电影' }, { index: 2.3, label: '音乐' }, { index: 3, label: '美食' }, { index: 4, label: '美景' }, { index: 5.1, label: '书籍' }, { index: 5.2, label: '课程' }, ]
// 切换选项 indexChange: function (e) { this.setData({ currentIndex: e.detail.value }) },
动态列表（步骤条）
此处仅借用步骤条组件的样式，并无步骤跳转的功能
pages\index\index.wxml
要点详见代码中的注释
<!-- wx:if 根据 currentIndex 值渲染对应选项的内容 --> <view wx:if="{{currentIndex===1}}" class="stepBox"> <!-- current 属性为数据长度，以便高亮显示所有步骤 --> <t-steps layout="vertical" readonly theme="dot" current='{{infoList.length}}'> <t-step-item wx:for="{{infoList}}" wx:key="index" title="{{item.date}}"> <!-- 插槽 extra -- 自定义每个步骤中的内容 --> <!-- 通过自定义属性 data-id 实现事件传参 --> <view slot="extra" class="contentBox" bindtap="gotoDetail" data-id="{{item._id}}"> <view> {{item.title}} </view> <view> {{item.publisher}} </view> </view> </t-step-item> </t-steps> </view>
pages\index\index.wxss
/* 动态（步骤条）样式 */ .stepBox { padding: 40rpx; } .contentBox { display: flex; justify-content: space-between; color: grey; }
pages\index\index.json
"t-steps": "tdesign-miniprogram/steps/steps", "t-step-item": "tdesign-miniprogram/step-item/step-item", "t-icon": "tdesign-miniprogram/icon/icon"
pages\index\index.js
要点详见代码中的注释
infoList: [], // data中新增变量--动态列表
// 生命周期--页面加载时执行 onLoad() { // 访问接口，获取动态列表 wx.cloud.database().collection('message').get().then( res => { console.log(res) this.setData({ infoList: res.data }) } ) },
此处需在微信云数据库中，新增集合 message ，将数据权限修改为所有用户可读，并添加如下数据：
{"_id":"21f8dd5b63d78070011a4993754bcab0","content":"如果前进的每一步都有有经验的朋友分享避坑路线，会不会让你感觉既幸运又开心呢？ 那么，我们是不是也可以分享出自己的经验，帮助到其他朋友呢？ 这是每个人都拥有的微光，彼此照亮，便能成就更加美好的人间！","date":"2013-1-29","publisher":"朝阳","title":"生命的微光"} {"_id":"21f8dd5b63d788c6011b18bb453db82b","publisher":"朝阳","title":"耍完武汉，返回成都","content":"充实欢乐的春节假期结束啦，没了疫情的纷扰，有了女朋友的陪伴，生活日渐鲜亮灿烂了起来，嗨翻 顺利回到成都，新的征程即将开启，明天，你好，我来啦！","date":"2013-1-28"}
// 查看动态详情 gotoDetail: function (e) { // 通过自定义属性 data-id 获取到 id let id = e.currentTarget.dataset.id wx.navigateTo({ // 跳转到新页面。同时携带参数id url: '/pages/index/message/detail/index?id=' + id }) },
动态详情
新增了动态详情页面，目录如下：
pages\index\message\detail\index.wxml
<view class="detailBox"> <view class="titleBox"> {{msgDetail.title}} </view> <view class="pubInfoBox"> <view>{{msgDetail.date}}</view> <view>{{msgDetail.publisher}}</view> </view> <view class="contentBox"> {{msgDetail.content}} </view> </view>
pages\index\message\detail\index.wxss
.detailBox { padding: 40rpx; } .titleBox { font-weight: bold; text-align: center; font-size: 60rpx; } .pubInfoBox { font-size: 30rpx; text-align: center; color: grey; padding: 30rpx; display: flex; justify-content: space-around; } .contentBox { /* 文本分散对齐 */ text-align: justify; line-height: 2; }
pages\index\message\detail\index.json
{ "navigationBarTitleText": "动态--详情" }
pages\index\message\detail\index.js
要点详见代码中的注释
Page({ data: { msgDetail:{} }, // 生命周期--页面加载 onLoad(options) { // 获取页面跳转中携带的参数 id let id = options.id // 通过doc函数，传入 id 查询单条数据的详情 wx.cloud.database().collection('message').doc(id).get().then( res => { this.setData({ msgDetail: res.data }) } ) } })
