【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）

开始前，请先完成圆梦宝典中滚动公告栏的开发，详见

【微信小程序-原生开发】实用教程 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 获取到 idlet id = e.currentTarget.dataset.idwx.navigateTo({// 跳转到新页面。同时携带参数idurl: '/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) {// 获取页面跳转中携带的参数 idlet id = options.id// 通过doc函数，传入 id 查询单条数据的详情wx.cloud.database().collection('message').doc(id).get().then(res => {this.setData({msgDetail: res.data})})}
})

【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）相关推荐

【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
【微信小程序-原生开发】实用教程05-首页（含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片）
开始前,请先完成启动/欢迎/首屏广告页的开发,详见 [微信小程序-原生开发]实用教程04-启动/欢迎/首屏广告页(含倒计时.添加文字.rpx.定义变量和函数.读取变量.修改变量.wx.reLaunch ...
【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
开始前,请先完成项目创建,详见 [微信小程序-原生开发]实用教程01-注册登录账号,获取 AppID.下载安装开发工具.创建项目.上传体验前期准备因我们的项目是根据模板创建的,需先清理掉无效的页面 ...
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
可在系列教程的基础上继续开发,也可以单独使用 [微信小程序-原生开发]系列教程效果预览代码实现点击触发生成海报在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面 pages\comp ...
【微信小程序-原生开发】系列教程目录（已完结）
01-注册登录账号,获取 AppID.下载安装开发工具.创建项目.上传体验 https://sunshinehu.blog.csdn.net/article/details/128663679 02- ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内可以滚动内容(包括图片) 效果图这里的遮罩层内容由两张图片构成底图+内部内容实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
微信小程序原生开发集成IM服务出现无法找到模块“tim-wx-sdk”的声明文件问题解决
微信小程序原生开发集成IM服务出现无法找到模块"tim-wx-sdk"的声明文件问题解决: 通过npm命令安装配置: 在终端进入到小程序项目根目录执行:npm install 未初 ...

【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）

需求描述

可滚动选项

pages\index\index.wxml

pages\index\index.json

pages\index\index.js

动态列表（步骤条）

pages\index\index.wxml

pages\index\index.wxss

pages\index\index.json

pages\index\index.js

动态详情

pages\index\message\detail\index.wxml

pages\index\message\detail\index.wxss

pages\index\message\detail\index.json

pages\index\message\detail\index.js

【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）相关推荐

最新文章

热门文章