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

这篇具有很好参考价值的文章主要介绍了【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

需求描述

效果如下:

微信小程序原生开发,微信小程序Grid 宫格导航,微信小程序页面排版教程

代码实现

Grid 宫格导航

微信小程序原生开发,微信小程序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.yssmx.com/a631a1bdadd2452ea4070a59b11b0403.jpeg',
    img2: 'https://img-blog.yssmx.com/8f321eae383f45049f6dda0fdc6861ec.jpeg',
    img3: 'https://img-blog.yssmx.com/8a9fdb8f3ad941e8868fca0b9b557323.jpeg',
    img4: 'https://img-blog.yssmx.com/68aac8da25ab42e993e988769a9e006a.jpeg',
    img5: 'https://img-blog.yssmx.com/dc89dd3208f546f4bcfbde2240153a24.jpeg',
    img6: 'https://img-blog.yssmx.com/31b50ad5aba74f86b5860249e9123d66.jpeg',
    img7: 'https://img-blog.yssmx.com/033d163a40d347fcb4c0120d5462daed.jpeg',
    img8: 'https://img-blog.yssmx.com/5ead2d4c0a694cfebf86e2e03fad75d2.jpeg',
    img9: 'https://img-blog.yssmx.com/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
    微信小程序原生开发,微信小程序Grid 宫格导航,微信小程序页面排版教程

  2. 再用快捷方式建页面
    在文件夹 health 上点击鼠标右键打开右键快捷菜单,选择 新建 page,输入文件名 index 后回车
    微信小程序原生开发,微信小程序Grid 宫格导航,微信小程序页面排版教程
    微信小程序原生开发,微信小程序Grid 宫格导航,微信小程序页面排版教程
    微信小程序原生开发,微信小程序Grid 宫格导航,微信小程序页面排版教程
    此种方式新建的页面,会在 app.json 中自动生成页面路径
    微信小程序原生开发,微信小程序Grid 宫格导航,微信小程序页面排版教程

侧边导航

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

微信小程序原生开发,微信小程序Grid 宫格导航,微信小程序页面排版教程

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.yssmx.com/640a758c89024652bc0d73a517cd00e9.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.yssmx.com/6e6d965206af48f58e9f2de39e63eb0e.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.yssmx.com/0603ee4b1f164200a9df2122d1c3b58d.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.yssmx.com/52e8ac49f202431b843c9256e9887905.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.yssmx.com/93c49548d7c64fd88d729c0f5a12c642.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.yssmx.com/bd35e10b99e946478c541d285a301899.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.yssmx.com/ce758559f189453ea368757612650fd8.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.yssmx.com/cfdaa5c843ed4659a9ac1b2b511b67f7.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.yssmx.com/f3852a775ab742069f22ddb1c754e2e7.jpeg'
          },
          {
            type:'img',
            imgURL:'https://img-blog.yssmx.com/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.yssmx.com/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 可以自定义当前页面的顶部导航的文字
    微信小程序原生开发,微信小程序Grid 宫格导航,微信小程序页面排版教程文章来源地址https://www.toymoban.com/news/detail-494208.html

到了这里,关于【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用vscode开发原生微信小程序

    文章目录 前言 一、vscode需要下载哪些插件? 二、相关配置 总结 由于微信小程序开发工具的弊端,我们可以使用vscode来开发微信小程序,只需要做好一下的配置即可. 1.安装微信小程序开发助手 2.wechat-snippet 3.Easy-WXLESS 1.打开设置 在settings.json中添加以下代码 由于微信小程序开发

    2024年02月16日
    浏览(16)
  • 快速上手微信小程序(纯原生)基于微信开发者工具+云开发

    最近开发一个小程序。因为体量实在不大,两张表,几个接口。便打算写原生的代码。没有使用uniapp等框架。记录一下一个小程序从搭建到审核发布的那些坑和经验做为学习笔记。 几个网站请收藏 你的小程序需要开发工具: 保姆级传送门 你的小程序需要一个身份证: 微信公

    2024年02月10日
    浏览(23)
  • Uniapp与原生微信小程序开发区别对比

    微信小程序:(微信小程序也可以不写wx:for-index和wx:for-item,默认为index和item`) uni-app:

    2024年02月15日
    浏览(15)
  • 微信小程序原生开发功能合集十六:系统主页实现

      本章实现小程序主页开发及对应逻辑处理,实现问卷填报相关功能,实现问卷查看、问卷查看、填报历史等功能的实现。   另外还提供小程序开发基础知识讲解课程,包括小程序开发基础知识、组件封装、常用接口组件使用及常用功能实现等内容,具体如下:   

    2024年02月10日
    浏览(16)
  • 微信小程序原生开发功能合集二:下拉选择组件封装

      本章实现小程序中下拉选择组件的封装实现,通过自定义组件的方式实现下拉选择功能,使用小程序的picker组件实现下拉数据的展示及相关自定义处理,封装数据加载过程,数据切换逻辑监听等。   本节实现select组件的开发说明,另使用nodejs创建express服务器,为远程

    2024年02月02日
    浏览(18)
  • UniApp项目中 使用微信小程序原生语言 进行开发

    wxcomponents 下放的是微信小程序原生代码写的组件。我进行了封装 在你下uniApp 项目的根目录创建一个 wxcomponents 名字千万不要错 京东、支付宝灯参考下面图片 官方文档也有介绍 然后在你需要引入原生功能的页面里面引入你的组件(我这里提前已经放过来了。在上面图可看到

    2024年02月04日
    浏览(22)
  • 微信小程序原生开发功能合集十二:编辑界面的实现

      本章实现编辑界面的实现处理,包括各编辑组件的使用及添加数据保存数据流程的实现处理。   另外还提供小程序开发基础知识讲解课程,包括小程序开发基础知识、组件封装、常用接口组件使用及常用功能实现等内容,具体如下:    1. CSDN课程: https://edu.csdn.ne

    2024年02月02日
    浏览(20)
  • 微信小程序原生开发功能合集十五:个人主页功能实现

      本章个人主页功能实现,展示当前登录用户信息、个人主页、修改密码、浏览记录、我的收藏、常见问题、意见反馈、关于我们等界面及对应功能实现。   另外还提供小程序开发基础知识讲解课程,包括小程序开发基础知识、组件封装、常用接口组件使用及常用功能实

    2024年02月06日
    浏览(53)
  • 【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)

    优点:操作方便,支持多彩图标 缺点:会增加源代码大小 下载 svg 格式的图标图片,放入源码中使用 小程序项目中的路径为 assetsicon美食.svg 优点:不会增加源代码大小 缺点:不支持多彩图标,更新比较麻烦 将图标添加到自己的图标项目中后,生成对应的 css 链接 浏览器打

    2024年02月11日
    浏览(16)
  • 关于微信小程序原生组件与uniApp混合开发过程遇到的问题与解决方式

    前言: 在实际开发过程中,尤其是小程序的开发,我们常常会遇到一些在文档中解决不了的问题,在这里,我就浅谈一下我遇到的一些问题 1.小程序的构建框架是uni-app,却突然被要求用原生的微信小程序代码来开发,到最后要整合到uni-app里面 这个整合问题,uni-app官网就有

    2024年02月05日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包