【微信小程序-原生开发】实用教程07 - Grid 宫格导航，详情页，侧边导航（含自定义页面顶部导航文字）

news2024/11/18 19:37:55

开始前，请先完成成员页的开发，详见

【微信小程序-原生开发】实用教程 06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
https://blog.csdn.net/weixin_41192489/article/details/128736269

需求描述

效果如下：

在这里插入图片描述

代码实现

Grid 宫格导航

在这里插入图片描述

pages\bible\index.wxml

<t-grid class="block" column="{{3}}">
  <t-grid-item text="身体健康" image="{{img1}}" url="{{url1}}"/>
  <t-grid-item text="家庭幸福" image="{{img2}}" />
  <t-grid-item text="生活美好" image="{{img3}}" />
  <t-grid-item text="财务富足" image="{{img4}}" />
  <t-grid-item text="事业有成" image="{{img5}}" />
  <t-grid-item text="工作顺遂" image="{{img6}}" />
  <t-grid-item text="人际和谐" image="{{img7}}" />
  <t-grid-item text="时间高效" image="{{img8}}" />
  <t-grid-item text="心情愉悦" image="{{img9}}" />
</t-grid>
  • column —— 每行宫格的数量
  • text —— 宫格的文字描述
  • image —— 宫格的配图
  • url —— 点击宫格后跳转的页面路径

更多配置项见
https://tdesign.tencent.com/miniprogram/components/grid?tab=api

pages\bible\index.js

Page({
  data: {
    url1: '/pages/bible/detail/health/index',
    img1: 'https://img-blog.csdnimg.cn/a631a1bdadd2452ea4070a59b11b0403.jpeg',
    img2: 'https://img-blog.csdnimg.cn/8f321eae383f45049f6dda0fdc6861ec.jpeg',
    img3: 'https://img-blog.csdnimg.cn/8a9fdb8f3ad941e8868fca0b9b557323.jpeg',
    img4: 'https://img-blog.csdnimg.cn/68aac8da25ab42e993e988769a9e006a.jpeg',
    img5: 'https://img-blog.csdnimg.cn/dc89dd3208f546f4bcfbde2240153a24.jpeg',
    img6: 'https://img-blog.csdnimg.cn/31b50ad5aba74f86b5860249e9123d66.jpeg',
    img7: 'https://img-blog.csdnimg.cn/033d163a40d347fcb4c0120d5462daed.jpeg',
    img8: 'https://img-blog.csdnimg.cn/5ead2d4c0a694cfebf86e2e03fad75d2.jpeg',
    img9: 'https://img-blog.csdnimg.cn/348a0750f0ba4c868040dc7300baf57d.jpeg',
  },
})

pages\bible\index.wxss

.block {
  display: block;
  margin-bottom: 32rpx;
}

pages\bible\index.json

{
  "usingComponents": {
    "t-grid": "tdesign-miniprogram/grid/grid",
    "t-grid-item": "tdesign-miniprogram/grid-item/grid-item"
  }
}

详情页

微信小程序中新增页面的详细步骤如下

  1. 先建文件夹
    以“身体健康”板块为例，在文件夹 bible 下新建文件夹 detail ，再在文件夹detail 内新建文件夹 health
    在这里插入图片描述

  2. 再用快捷方式建页面
    在文件夹 health 上点击鼠标右键打开右键快捷菜单，选择 新建 page，输入文件名 index 后回车
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    此种方式新建的页面，会在 app.json 中自动生成页面路径
    在这里插入图片描述

侧边导航

使用 Tdesign 组件库提供的组件即可，直接上代码

在这里插入图片描述

pages\bible\detail\health\index.wxml

<view class="side-bar-wrapper">
  <t-side-bar value="{{sideBarIndex}}" bind:change="onSideBarChange">
    <t-side-bar-item wx:for="{{categories}}" wx:key="index" value="{{item.value || index}}" label="{{item.label}}" badge-props="{{item.badgeProps}}" />
  </t-side-bar>
  <scroll-view class="content" scroll-y scroll-with-animation scroll-top="{{scrollTop}}" bind:scroll="onScroll">
    <view wx:for="{{categories}}" wx:key="index" class="section">
      <view class="title">{{item.title || item.label}}</view>
        <block wx:for="{{item.items}}" wx:key="index" wx:for-item="cargo">
          <view class="itemBox">
            <t-image wx:if="{{cargo.type === 'img'}}" width='300' src="{{cargo.imgURL}}" mode="widthFix" />
            <view wx:else>
              {{cargo.content}}
            </view>
          </view>
        </block>
    </view>
  </scroll-view>
</view>

pages\bible\detail\health\index.js

Page({
  offsetTopList: [],
  data: {
    sideBarIndex: 1,
    scrollTop: 0,
    categories: [
      {
        label: '饮食',
        title: '饮食',
        items:[
          {
            content:'编辑ing'
          }
        ]
      },
      {
        label: '睡眠',
        title: '睡眠',
        items:[
          {
            content:'编辑ing'
          }
        ]
      },
      {
        label: '健身',
        title: '健身',
        items:[
          {
            content:'编辑ing'
          }
        ]
      },
      {
        label: '减肥',
        title: '减肥',
        badgeProps: {
          count: 10,
        },
        items: [
          {
            type:'img',
            imgURL:'https://img-blog.csdnimg.cn/640a758c89024652bc0d73a517cd00e9.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.csdnimg.cn/6e6d965206af48f58e9f2de39e63eb0e.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.csdnimg.cn/0603ee4b1f164200a9df2122d1c3b58d.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.csdnimg.cn/52e8ac49f202431b843c9256e9887905.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.csdnimg.cn/93c49548d7c64fd88d729c0f5a12c642.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.csdnimg.cn/bd35e10b99e946478c541d285a301899.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.csdnimg.cn/ce758559f189453ea368757612650fd8.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.csdnimg.cn/cfdaa5c843ed4659a9ac1b2b511b67f7.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.csdnimg.cn/f3852a775ab742069f22ddb1c754e2e7.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.csdnimg.cn/bb68b3e22d4b4b5ba969366cc1d1eeb2.jpeg'
          },
        
        ],
      }
    ],
  },
  onLoad() {
    const query = wx.createSelectorQuery().in(this);

    query
      .selectAll('.title')
      .boundingClientRect((rects) => {
        this.offsetTopList = rects.map((item) => item.top);
      })
      .exec();
  },
  onSideBarChange(e) {
    const { value } = e.detail;

    this.setData({ sideBarIndex: value, scrollTop: this.offsetTopList[value] });
  },
  onScroll(e) {
    const { scrollTop } = e.detail;
    const threshold = 50; // 下一个标题与顶部的距离

    if (scrollTop < threshold) {
      this.setData({ sideBarIndex: 0 });
      return;
    }

    const index = this.offsetTopList.findIndex((top) => top > scrollTop && top - scrollTop <= threshold);

    if (index > -1) {
      this.setData({ sideBarIndex: index });
    }
  },
});
  • data 中 categories 的 label 为左侧导航的文字
  • data 中 categories 的 title 为右侧内容的标题
  • data 中 categories 的 items 为右侧内容的详情
  • 若内容为文本，则直接写在 items 数组的 content 中
  • 若内容为图片，则 items 数组的内容为
{
   type:'img',
   imgURL:'https://img-blog.csdnimg.cn/640a758c89024652bc0d73a517cd00e9.jpeg'
},

pages\bible\detail\health\index.wxss

page {
  background-color: #fff;
}

page .round-image {
  border-radius: 12rpx;
}

.side-bar-wrapper {
  display: flex;
  height: 100vh;
}

.side-bar-wrapper .content {
  flex: 1;
}

.side-bar-wrapper .section {
  padding: 32rpx 0;
}

.side-bar-wrapper .title {
  padding-left: 40rpx;
  margin-bottom: 8rpx;
  line-height: 52rpx;
}

.itemBox{
  padding:40rpx 40rpx 0rpx 40rpx;
}

.title{
  font-weight: bold;
}

pages\bible\detail\health\index.json

{
  "usingComponents": {
    "t-side-bar": "tdesign-miniprogram/side-bar/side-bar",
    "t-side-bar-item": "tdesign-miniprogram/side-bar-item/side-bar-item",
    "t-image": "tdesign-miniprogram/image/image"
  },
  "navigationBarTitleText": "DOS圆梦宝典--身体健康"
}
  • navigationBarTitleText 可以自定义当前页面的顶部导航的文字
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/183875.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Canal快速入门

Canal快速入门

Canal 一、Canal 入门 1.1、什么是 Canal ​ 阿里巴巴 B2B 公司&#xff0c;因为业务的特性&#xff0c;卖家主要集中在国内&#xff0c;买家主要集中在国外&#xff0c;所以衍生出了同步杭州和美国异地机房的需求&#xff0c;从 2010 年开始&#xff0c;阿里系公司开始逐步…
阅读更多...
PaddleSeg图像分割预测pyinstaller打包报错:No module named ‘framework_pb2‘，问题解决

PaddleSeg图像分割预测pyinstaller打包报错:No module named ‘framework_pb2‘，问题解决

报错 在使用PaddlePaddle的FastDeploy部署图像分割时&#xff0c;需要验证目标电脑环境&#xff0c;所以先将预测代码predict.py用pyinstaller打包来试试&#xff0c;指令&#xff1a; pyinstaller -D predict.py 打包完成&#xff0c;成功生成exe 运行时报错如下&#xff1a;…
阅读更多...
项目五linux 内网完整渗透测试实例笔记

项目五linux 内网完整渗透测试实例笔记

1.DDD4 靶场介绍本靶场存在三个 flag 把下载到的虚拟机环境导入到虚拟机&#xff0c;本靶场需要把网络环境配置好。1.1.网络示意图2. 信息收集2.1.主机发现sudo netdiscover -i eth0 -r 192.168.1.0/242.2.nmap 主机发现nmap -sn 192.168.1.0/242.3.masscan 端口探测sudo massc…
阅读更多...
Python批量改文件名

Python批量改文件名

对以下路径中的文件名批量修改。 一、读取指定路径中的文件名 #导入标准库 import os#读取文件名 filesDir "路径……" fileNameList os.listdir(filesDir)#输出路径中的所有文件 for filename in fileNameList:print(filename)二、正则表达式提取需要保留的部分 …
阅读更多...
[Vulnhub] DC-6

[Vulnhub] DC-6

下载链接&#xff1a;https://download.vulnhub.com/dc/DC-6.zip 知识点&#xff1a; wordpress-getshellnc反弹shell横向越权nmap提权 目录 <1> 信息搜集 <2> wordpress_Activity monitor插件rce漏洞getshell <3> Privilege Escalation&#xff08;nm…
阅读更多...
windows上安装hadoop

windows上安装hadoop

下载与安装 hadoop下载官网 清华大学镜像下载 进入官网点击Binary download是运行在windows上的。在Apache里面下东西经常会有binary和source的版本&#xff0c;binary是编译好的可以直接使用&#xff0c;source是还没编译过的源代码&#xff0c;需要自行编译。 镜像下载 选…
阅读更多...
OSERDESE3与ODELAYE3原语

OSERDESE3与ODELAYE3原语

SelectIO 接口 UltraScale 架构的器件 包括三种I/O&#xff1a;高性能(HP), 高密度 (HD),和高量程(HR) I/O banks 。 HP I/O banks满足高速存储和片到片接口性能要求&#xff0c;电压最高1.8V。HR I/O banks支持更大范围电压&#xff0c;电压最高3.3V。HD I/O banks支持低速接…
阅读更多...
Day872.事务间是否需要隔离 -MySQL实战

Day872.事务间是否需要隔离 -MySQL实战

事务间是否需要隔离 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于事务间是否需要隔离的内容。 创建的视图是静态视图&#xff0c;当前视图对应的数据由字段的当前值加上回滚段计算得到。 事务隔离级别 的时候提到过&#xff0c;如果是可重复读隔离级别&#xff…
阅读更多...
1457. 二叉树中的伪回文路径

1457. 二叉树中的伪回文路径

1457. 二叉树中的伪回文路径题目算法设计&#xff1a;深度优先搜索题目 传送门&#xff1a;https://leetcode.cn/problems/pseudo-palindromic-paths-in-a-binary-tree/ 算法设计&#xff1a;深度优先搜索 如何判断一组数字是否存在一个回文串组合&#xff1f; 如 [1, 2, 1]…
阅读更多...
css元素显示模式（行内、块级、行内块）

css元素显示模式（行内、块级、行内块）

1.块级元素 显示特点&#xff1a; 1、独占一行&#xff08;一行只能显示一个&#xff09; 2、宽度默认是父元素的宽度&#xff0c;高度默认由内容撑开 3、可以设置宽高 代表标签&#xff1a; div、p、h系列、ul、li、dl、dt、dd、form、header、anv、footer <style>div…
阅读更多...
电脑数据怎么迁移？6种旧电脑数据传输到新电脑方法分享

电脑数据怎么迁移？6种旧电脑数据传输到新电脑方法分享

如今&#xff0c;我们拥有如此多的设备&#xff0c;从一个设备跳到另一个设备似乎是一项艰巨的任务。平均而言&#xff0c;一个人可能拥有一台电脑、一部智能手机和一台平板电脑。但是&#xff0c;如果您有多台计算机或要换一台新计算机怎么办&#xff1f;您可能在互联网上问过…
阅读更多...
电脑录像软件推荐？分享3款，简单好用且方便

电脑录像软件推荐？分享3款，简单好用且方便

​在日常生活中&#xff0c;我们经常会遇到临时有事情需要外出处理的时候&#xff0c;但在如果正好在上网课或者开会议、听讲座的时候&#xff0c;这时候外出很容易会错过一些重要的内容。这个时候&#xff0c;就需要借助电脑录像软件了。电脑录像软件推荐什么&#xff1f;今天…
阅读更多...
Docker consul

Docker consul

目录 一、Docker consul简介 二、Consul优势 三、Consul中的概念 四、部署 1、consul服务器配置 2、查看集群信息 3、在浏览器上进到consul的界面进行管理 4、容器服务自动注册到consul集群 5、consul节点配置nginx 6、配置模板信息 7、配置并启动consul-template …
阅读更多...
Java创建pdf的代码

Java创建pdf的代码

一、概述 以下代码可以在指定文件夹内创建一个简历pdf。 以下代码生成pdf&#xff0c;主要是设置cell所占的行、列、内容。 二、代码 1.需要的jar包 itext-asian-5.2.0.jar itextpdf-5.5.5.jar2.个人信息类MsgUtil.java 这个类里面放了个人信息&#xff1b;也可以放多个人…
阅读更多...
Python量化投资——股票择时到底能否赚钱？TA-Lib中33种技术指标有效性回测研究

Python量化投资——股票择时到底能否赚钱？TA-Lib中33种技术指标有效性回测研究

TA-Lib中33种技术指标回测研究Python量化投资——TA-Lib中33种股票择时技术指标的有效性研究为什么要做这个评测技术指标清单评测方法评测工具期待你的意见Python量化投资——TA-Lib中33种股票择时技术指标的有效性研究 为什么要做这个评测 技术指标是股票交易中最常用的技术…
阅读更多...
CSS 常见布局

CSS 常见布局

文章目录CSS 常见布局单列布局单列布局&#xff08;不通栏&#xff09;单列布局&#xff08;通栏&#xff09;双列布局floatoverflow:hiddenflexgridCSS 常见布局 单列布局 单列布局&#xff08;不通栏&#xff09; <!DOCTYPE html> <html><head><meta …
阅读更多...
推荐系统之推荐中心逻辑

推荐系统之推荐中心逻辑

5.5 推荐中心逻辑 学习目标 目标 无应用 无 5.5.1 推荐中心作用 推荐中一般作为整体召回结果读取与排序模型进行排序过程的作用&#xff0c;主要是产生推荐结果的部分。 5.5.2 推荐目录 server目录为整个推荐中心建立的目录 recall_service.:召回数据读取目录reco_centor:推…
阅读更多...
如何利用 Selenium 对已打开的浏览器进行爬虫！

如何利用 Selenium 对已打开的浏览器进行爬虫！

大家好&#xff0c;我是安果&#xff01;在对某些网站进行爬虫时&#xff0c;如果该网站做了限制&#xff0c;必须完成登录才能展示数据&#xff0c;而且只能通过短信验证码才能登录这时候&#xff0c;我们可以通过一个已经开启的浏览器完成登录&#xff0c;然后利用程序继续操…
阅读更多...
STM32—超声波测距

STM32—超声波测距

超声波简介 超声波测距模块是用来测量距离的一种产品&#xff0c;通过发送和收超声波&#xff0c;利用时间差和声音传播速度&#xff0c; 计算出模块到前方障碍物的距离。 型号&#xff1a;HC-SR04 时序图 怎么让它发送波 Trig触发信号&#xff0c;给Trig端口至少10us的高电平…
阅读更多...
“华为杯”研究生数学建模竞赛2005年-【华为杯】A题：城市交通管理中的出租车规划（附获奖论文）

“华为杯”研究生数学建模竞赛2005年-【华为杯】A题：城市交通管理中的出租车规划（附获奖论文）

赛题描述 A: Highway Traveling time Estimate and Optimal Routing Ⅰ Highway traveling time estimate is crucial to travelers. Hence, detectors are mounted on some of the US highways. For instance, detectors are mounted on every two-way six-lane highways o…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023