微信小程序垂直列表联动分类

原创 已于 2024-05-11 17:32:10 修改 · 1.9k 阅读 · 50 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#小程序
于 2021-04-26 11:15:53 首次发布
这是一个关于微信小程序的代码实现，展示了如何创建一个包含搜索框、左侧导航和右侧滚动商品展示的布局。左侧导航是横向滚动的类别列表，右侧则是根据选择的类别显示对应商品的垂直滚动列表。当点击左侧导航时，会更新右侧商品列表并设置相应的激活状态。同时，代码中包含了数据初始化、滚动监听和动画效果的处理。

在这里插入图片描述

wxml代码

<view class="search">
  <input class="search-box" placeholder='痘研商城' bindtap='goodsName'></input>
  <image src="{{staticImg}}index/iconSearch.png" class='question-mark'></image>
</view>
<!-- 左侧导航 -->
<view class='tui-fixed-left'>
  <scroll-view class='tui-city-scroll' scroll-x="true" scroll-y="true" style='height:92%;' scroll-with-animation="true"
    scroll-top="{{leftMenuTop}}">
    <text class="menu-item {{index === currentActiveIndex ? 'menu-active' : ''}}" wx:for="{{navList}}" wx:key="unique"
      data-index="{{index}}" id='{{index}}' catchtap='changeMenu'>{{item.c_name}}</text>
  </scroll-view>
</view>
<!-- 右侧滚动商品 -->
<view class='content'>
  <scroll-view class='tui-city-scroll-y' scroll-y="true" style='height:92%;' scroll-with-animation="true"
    scroll-top="{{rightProTop}}" bindscroll="scroll">
    <view class='pro-item' wx:for="{{navList}}" wx:key="unique">
      <view class='tui-list-head' id='NAV{{index}}'>{{item.c_name}}</view>
      <view class='tui-list-li'>
        <view class='goods-box' wx:for-item='items' wx:for="{{item.list}}" wx:key="unique">
          <image class='goodsImg' src='{{items.url}}'></image>
          <view class='goodsName'>{{items.goodsName}}</view>
        </view>
      </view>
    </view>
  </scroll-view>
</view>

js代码

var app = getApp();
//声明全局变量
let proListToTop = [],
  menuToTop = [],
  MENU = 0,
  windowHeight, timeoutId;
// MENU ==> 是否为点击左侧进行滚动的，如果是，则不需要再次设置左侧的激活状态
Page({

  data: {
    staticImg: app.globalData.staticImg,
    currentActiveIndex: 0,
    // 接口返回的商品数组
    navList: [{
        c_id: "01",
        c_name: '电脑办公',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "02",
        c_name: '祛痘',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "02",
        c_name: '化妆品',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "03",
        c_name: '口红',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "04",
        c_name: '包包',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "05",
        c_name: '面膜',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "06",
        c_name: '精华乳',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "07",
        c_name: '洁面乳',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "08",
        c_name: '洁面乳',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "09",
        c_name: '洁面乳',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "10",
        c_name: '洁面乳',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "11",
        c_name: '洁面乳',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "12",
        c_name: '洁面乳',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "13",
        c_name: '洁面乳',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "14",
        c_name: '洁面乳',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "07",
        c_name: '洁面乳',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
      {
        c_id: "07",
        c_name: '洁面乳',
        list: [{
            id: 1,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 2,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 3,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 4,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
          {
            id: 5,
            url: 'https://resource.yirenheju.cn/wechat/index/err.png',
            goodsName: '玩具',
          },
        ]
      },
    ],


  },
  onLoad: function (e) {
    // 确保页面数据已经刷新完毕~
    setTimeout(() => {
      this.getAllRects()
    }, 20)
  },

  changeMenu(e) {
    console.log(proListToTop);
    // 改变左侧tab栏操作
    if (Number(e.target.id) === this.data.currentActiveIndex) return
    MENU = 1
    this.setData({
      currentActiveIndex: Number(e.target.id),
      rightProTop: proListToTop[Number(e.target.id)]
    })
    this.setMenuAnimation(Number(e.target.id))
  },
  scroll(e) {
    console.log(e);
    for (let i = 0; i < proListToTop.length; i++) {
      if (e.detail.scrollTop < proListToTop[i] && i !== 0 && e.detail.scrollTop > proListToTop[i - 1]) {
        return this.setDis(i)
      }
    }
    // 找不到匹配项，默认显示第一个数据
    if (!MENU) {
      this.setData({
        currentActiveIndex: 0
      })
    }
    MENU = 0
  },
  setDis(i) {
    // 设置左侧menu栏的选中状态
    if (i !== this.data.currentActiveIndex + 1 && !MENU) {
      this.setData({
        currentActiveIndex: i - 1
      })
    }
    MENU = 0
    this.setMenuAnimation(i)
  },
  setMenuAnimation(i) {
    // 设置动画，使menu滚动到指定位置。
    let self = this
    console.log(33)
    if (menuToTop[i].animate) {
      console.log(11111)
      // 节流操作
      if (timeoutId) {
        clearTimeout(timeoutId)
      }
      timeoutId = setTimeout(() => {
        console.log(12138)
        self.setData({
          leftMenuTop: (menuToTop[i].top - windowHeight)
        })
      }, 50)
    } else {
      console.log(11)
      if (this.data.leftMenuTop === 0) return
      console.log(22)
      this.setData({
        leftMenuTop: 0
      })
    }
  },
  getActiveReacts() {
    wx.createSelectorQuery().selectAll('.menu-active').boundingClientRect(function (rects) {
      return rects[0].top
    }).exec()
  },
  getAllRects() {

    // 获取商品数组的位置信息
    wx.createSelectorQuery().selectAll('.pro-item').boundingClientRect(function (rects) {
      rects.forEach(function (rect) {
        console.log(rect)
        // 这里减去44是根据你的滚动区域距离头部的高度，如果没有高度，可以将其删去
        proListToTop.push(rect.top - 44)
      })
    }).exec()

    // 获取menu数组的位置信息
    wx.createSelectorQuery().selectAll('.menu-item').boundingClientRect(function (rects) {
      wx.getSystemInfo({
        success: function (res) {
          console.log(res);
          windowHeight = res.windowHeight / 2
          // console.log(windowHeight)
          rects.forEach(function (rect) {
            menuToTop.push({
              top: rect.top,
              animate: rect.top > windowHeight
            })
          })
        }
      })
    }).exec()
  },
  // 获取系统的高度信息
  getSystemInfo() {
    let self = this
    wx.getSystemInfo({
      success: function (res) {
        windowHeight = res.windowHeight / 2
      }
    })
  }

})

wxss代码

page {
  font-family: "微软雅黑";
  background-color: #f0f0f0;
}

.search {
  width: 100%;
  height: 88rpx;
  background-color: # 5196ff;
  box-sizing: border-box;
  padding-top: 18rpx;
  position: fixed;
  left: 0;
  top: 0;
}

.search-box {
  width: 690rpx;
  height: 57rpx;
  margin-left: 30rpx;
  background-color: #fff;
  box-sizing: border-box;
  padding-left: 60rpx;
  border-radius: 57rpx;
  font-size: 26rpx;
}

.question-mark {
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  left: 45rpx;
  top: 30rpx;
}

.tui-fixed-x {
  /* margin-left: 130px; */
  position: fixed;
  top: 89rpx;
  left: 0;
}

.tui-fixed-left {
  width: 180rpx;
  height: 100%;
  border-right: 1px solid #dfdfdf;
  position: fixed;
  background-color: #f5f5f5;
  top: 89rpx;
  left: 0;
}

.tui-list-head {
  height: 65rpx;
  line-height: 65rpx;
}

.tui-city-scroll {
  width: 100%;
}

.menu-item {
  font-size: 26rpx;
  box-sizing: border-box;
  height: 100rpx;
  line-height: 100rpx;
  width: 180rpx;
  background-color: #fff;
  display: block;
  border-bottom: 1px solid #dfdfdf;
  position: relative;
  z-index: 10;
  text-align: center;
}

.menu-active {
  border-left: 10rpx solid #5196ff;
  background-color: #f0f0f0;
}

.content {
  width: 570rpx;
  box-sizing: border-box;
  padding-left: 20rpx;
  padding-right: 20rpx;
  height: 100%;
  position: fixed;
  top: 89rpx;
  right: 0;
}

.tui-city-scroll-y {
  height: 100%;
  box-sizing: border-box;
}

.tui-list-head {
  height: 65rpx;
  line-height: 65rpx;
  font-size: 28rpx;
  font-weight: 700;
}

.tui-list-li {
  background-color: #fff;
  /* height: 400px; */
  overflow: hidden;
  color: #fff;
  font-size: 50rpx;
  box-sizing: border-box;
  padding: 20rpx 0 0 0;
}

.goods-box {
  width: 170rpx;
  /* height: 100rpx;
  background: #c00; */
  overflow: hidden;
  margin-right: 10rpx;
  /* margin-bottom: 10rpx; */
  float: left;
}

.tui-list-li .goods-box:nth-child(3n) {
  margin-right: 0rpx;
}

.goodsImg {
  display: block;
  width: 100rpx;
  height: 100rpx;
  margin: 0 auto;
  margin-bottom: 15rpx;
}

.goodsName {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  height: 42rpx;
  line-height: 42rpx;
  text-align: center;
  font-size: 24rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
  margin-bottom: 20rpx;
}
Faaaaaaq
关注
微信小程序实现商品属性联动选择
12-29
本文实例为大家分享了微信小程序实现商品属性联动选择的具体代码，供大家参考，具体内容如下 效果演示： 代码示例 1、commodity.xml <!-- 属性值联动选择 --> <!--options--> <!--每组属性--> <!--属性名--
uniapp(全端兼容) - 最新详细实现商品左右联动列表效果，uniapp全平台支持的“左侧分类菜单，右侧商品卡片“的定位联动，滑动商品列表时锚点自动高亮菜单，类似外卖美团京东商城列表（详细代码）
✅ 精选推荐文章
06-18 2748
uni-app，商城分类列表，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，商品分类页面，左分类，右商品，左侧菜单导航+右侧列表内容，分类菜单选择或滚动联动，uniApp实现仿京东左右联动活动，uniapp左边滚动右边固定效果，实现商品分类页面的 左边滚动右边固定效果，商品左右联动商品分类页面，联动侧边栏导航分类，分类列表左右联动，左侧菜单右侧列表双向联动的效果，仿美团左侧菜单栏，左侧菜单右侧商品锚点组件，好用的插件组件，微信小程序 uni
微信小程序商城项目实战(第三篇:商品列表)
Jiangxun9390的博客
06-20 755
Tabs。
微信小程序商城系列之商品列表页（一）
热门推荐
奔跑的蚂蚁
06-05 3万+
wxml:&lt;view class='list'&gt; &lt;block wx:for='{{dataList}}' wx:key='list' wx:for-item="item"&gt; &lt;view class="list_item"&gt; &lt;navigator url='details?id={{item.goods_id}}'&gt; ...
微信小程序商品分类页最佳实践
hawkol的专栏
05-11 6287
微信小程序商品分类页需要实现 1.单击左边的商品类目，右侧实现联动跳转到对应商品类目标题； 2.触屏拖动右侧商品列表，右侧跳转到对应商品类目；
【愚公系列】2022年10月 微信小程序-电商项目-使用vtabs实现商品列表页
愚公智库
09-27 9621
要实现商品列表页需要使用到weui的纵向选项卡（vtabs）功能，用于让用户在不同的视图中进行切换。vtabs属性名类型默认值必选描述vtabsArray[]yes数据项格式为{title}active-tabNumber0no激活选项卡索引Stringno选项卡样式Stringno行为样式String#ff0000no选定项目带下划线的一面的颜色String#000000no未选中的字体颜色String#ff0000no检查字体颜色。
Uniapp微信小程序：自封装｜垂直TAB分类导航列表组件｜支持锚点双向数据联动，列表追踪定位，自定义字段映射，TAB高亮切换时自动滚动（个人学习记录）
oneday223的博客
12-20 178
【代码】Uniapp微信小程序：自封装｜垂直TAB分类导航列表组件｜支持锚点双向数据联动，列表追踪定位，自定义字段映射（个人学习记录）
微信小程序左右联动商品列表
m0_50641264的博客
04-08 1125
<!--pages/l_rgoods/l_rgoods.wxml--> <text>pages/l_rgoods/l_rgoods.wxml</text> <view class="container"> <!--左侧栏--> <scroll-view class='scroll_left' scroll-y="true"> <view class="nav_left"> <blo.
hbuilderx开发微信小程序分类导航系统学习
最新发布
weixin_35390379的博客
01-10 461
通过实际案例讲解如何使用hbuilderx开发微信小程序的分类导航系统，涵盖页面布局与跳转逻辑，帮助开发者快速掌握hbuilderx开发微信小程序的核心技巧。
微信小程序–商品分类页面（左右滚动条）
无知者无畏
06-20 5861
微信小程序–商品分类页面（左右滚动条） 接口数据：https://api-hmugo-web.itheima.net/api/public/v1/categories 分类页面的结构 <view class="cates"> <searchInput></searchInput> <view class="cates_container"> <!-- 左侧菜单 --> <scroll-view class="lef
微信小程序三级分类
qq_45461146的博客
04-06 5036
今天，在做一个电商小程序的分类页面，要实现三级分类。首先，先上图。 要完成这样一个功能，前端的界面就不说了，具体说说怎么实现的吧，说复杂也挺复杂的，说简单只要会了思路就不难了。其实思路就是先在数据库中设计一个关于分类的数据表，数据表如下，因为本人java学的很烂，所以用的云开发，云数据库。先创建一张category表，如下图 上代码，页面布局： <view class="container"> <view class="search-header"> .
小程序基本命令
aiven1637的博客
10-30 3532
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
小程序商品列表：商品收藏实现
夏已微凉、
08-02 2375
小程序商品列表：商品收藏实现
小程序 | 微信小程序实现商品分类列表
JifengZ9的博客
08-25 1万+
小程序 | 微信小程序实现商品分类列表
微信小程序——商品列表
qq_44645934的博客
02-27 5503
微信小程序——商品列表
微信小程序分类菜单激活状态跟随列表滚动自动切换
分享互联网的有趣知识~
01-17 3320
微信小程序分类菜单激活状态跟随列表滚动自动切换，这里主要用到微信小程序提供的获取页面节点信息实现，组件用的是微信小程序的逻辑就是获取右侧盒子的节点信息，获取右侧子分类的节点信息，当子分类滑动到顶部的之后，则切换左侧分类状态，而且当右侧子分类的位置处于触顶以及包含顶部位置的状态下，同样激活左侧分类状态。
【小程序项目开发 -- 京东商城】uni-app 商品分类页面（下）
计算机魔术师的blog
06-29 3128
在上文 【小程序项目开发 – 京东商城】uni-app 商品分类页面（上）5.1 章节接口数据格式可以看到，我们的数据，在一级分类下，存贮了二级分类，二级分类又存贮了三级分类，嵌套存贮。 请求数据时在函数为其赋值（默认为第一个数据，动态数据变化在 在active激活项函数也对其进行动态数据绑定 效果： 样式 效果： 注意：在样式image组件的属性mode尽量不要使用，样式会很难调整 样式 效果： 注意：对scrollTop 赋值前后值不变情况 下会没有效果，如果默认值为0，函数
微信小程序实现双级联动菜单
m0_49072901的博客
05-25 2871
设计点餐平台的时候，难免会遇到如图所示情况，当滑动右侧菜品的时候，左侧类别也会随着右侧的变化而变化；当点击左侧的类别，右侧也会跳转到相应类别的菜品。具体实现方法如下： WXML展示，此处使用的是Color UI <scroll-view scroll-y style="height: 100%;"> <view class="VerticalBox" style="margin-top: 35rpx;"> <scroll-view class="Ver
微信小程序高仿京东分类效果完整版(超详细)
青衫折扇的博客
04-13 7041
我们先来看一下效果 下面我们直接上代码,很简单 wxml <view class="classify-head"> <view class="classify-search" bindtap="skipSearch"> <image class="icon-sou" src="../../../img/icon/icon-search...
小程序实现列表和详情页
叶子常常随风而落，分享博主日常学习和使用的一些技术
07-20 2225
在列表元素中增加data-id属性，用来存放唯一标识，然后传递参数到详情页。每个列表元素要有一个可以进行定位的值，这里就是data-id。使用列表展示数据、点击列表中的条目，跳转到详情页。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值