微信小程序实现商品数据联动效果

2024-10-01 12:32:29

微信小程序实现商品数据联动

直接复制代码更改可以看出效果，然后根据自己想要进行调整

注：以下商品图片用于测试，如有侵权请通知，会删除相关图片。

js部分：

// pages/demo1/demo1.js
//存放右侧分类的高度累加数组
var heightList = [];
//记录scroll-view滚动过程中距离顶部的高度
var distanceToTop = 0;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    curActive: 0, //当前选中项
    productList: [{
        c_name: '新鲜水果',
        list: [{
            id: 0,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '樱桃'
          },
          {
            id: 1,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '荔枝'
          },
          {
            id: 2,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '荔枝'
          },
          {
            id: 3,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '荔枝'
          },
          {
            id: 4,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '荔枝'
          },
          {
            id: 5,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '荔枝'
          },
          {
            id: 6,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '荔枝'
          },
          {
            id: 7,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '荔枝'
          },
        ]
      },
      {
        c_name: '海鲜水产',
        list: [{
            id: 0,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          },
          {
            id: 1,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          },
          {
            id: 2,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 3,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 4,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 5,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 6,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 7,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 8,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          },
        ]
      },
      {
        c_name: '测试数据1',
        list: [{
            id: 0,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          },
          {
            id: 1,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          },
          {
            id: 2,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 3,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 4,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 5,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 6,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 7,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 8,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          },
        ]
      },
      {
        c_name: '测试数据2',
        list: [{
            id: 0,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          },
          {
            id: 1,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          },
          {
            id: 2,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 3,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 4,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 5,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 6,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 7,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          }, {
            id: 8,
            img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            goodsName: '鲍鱼'
          },
        ]
      }
    ]
  },
  /**
   * 左侧: 菜单事件
   * @param {*} e
   */
  selectMenu(e) {
    let index = e.currentTarget.dataset.index;
    this.setData({
      curActive: index,
      toView: "nav" + index
    })
  },
  /**
   * 获取商品列表高度
   * 计算右侧商品某分类的高度
   */
  getProListHeight() {
    let tmpHeightList = [];
    let tmpH = 0; //临时存放每个分类的高度
    // 获取元素信息 返回一个 SelectorQuery 对象实例
    const query = wx.createSelectorQuery()
    query.selectAll('.product').boundingClientRect()
    query.exec(function (res) {
      res[0].forEach((item) => {
        tmpH += item.height;
        // Math.floor()向下取整 【根据个人需要修改】
        tmpHeightList.push(Math.floor(tmpH));
      })
      heightList = tmpHeightList;
      console.log(heightList);
    })
  },
  /**
   * 监听滚动时触发事件
   * @param {*} e
   */
  scroll(e) {
    if (heightList.length == 0) return;
    let scrollTop = e.detail.scrollTop; //滚动位置
    let current = this.data.curActive;
    console.log('scrollTop======>', scrollTop);
    if (scrollTop > distanceToTop) {
      //如果右侧 可视区域的竖直滚动位置 超过 当前列表选中项距顶部的高度（且没有下标越界），则更新左侧选中项
      if ((current + 1 < heightList.length) && (scrollTop >= heightList[current])) {
        this.setData({
          curActive: current + 1
        })
      }
    } else {
      //如果右侧 可视区域的竖直滚动位置 小于 当前列表选中的项距顶部的高度，则更新左侧选中项
      if ((current - 1 >= 0) && (scrollTop < heightList[current - 1])) {
        this.setData({
          curActive: current - 1
        })
      }
    }
    //更新顶部的距离
    distanceToTop = scrollTop;
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取商品列表高度
    this.getProListHeight();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log('触发下拉')
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('触发上拉触底')
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {}
})

然后是wxml部分：

<view class="title">商品数据联动</view>

<view class="box">
  <view class="left">
    <scroll-view scroll-y="true" scroll-with-animation="true" class="container">
      <view class="menu-item {{index == curActive ? 'active' : ''}}" wx:for="{{productList}}" data-index="{{index}}" wx:key="index" bindtap="selectMenu">
        {{item.c_name}}
      </view>
    </scroll-view>
  </view>
  <view class="right">
    <scroll-view scroll-y="true" scroll-with-animation="true" bindscroll="scroll" scroll-into-view="{{toView}}" style="height: 100%">
      <block wx:for="{{productList}}" wx:key="*this">
        <!-- id：实现点击左侧某分类时，右侧滚动至相应位置（注意：id不能以数字开头）-->
        <view id="nav{{index}}" class="product">
          <view class="c_name">{{item.c_name}}</view>
          <view class="goods-box">
            <view class="goods-item" wx:for="{{item.list}}" wx:for-item='items' wx:key="index">
              <image class="goods-img" src="{{items.img}}" mode="aspectFit"></image>
              <view class="goods-name">{{items.goodsName}}</view>
            </view>
          </view>
        </view>
      </block>
      <view class="bottom">到底了~没有更多了</view>

    </scroll-view>
  </view>
</view>

然后是css部分：

.title {
  text-align: center;
  margin-top: 30px;
}

.box{
  width: 100%;
  height: 400px;
  display: flex;

}
.left {
  width: 80px;
  display: inline-block;
}
.right{
  flex: 1;
  background: #ccc;
}

.container {
  width: 100%;
  height: 400px;
  background-color: gray;
  padding: 0;
}

.menu-item {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #000;
  background-color: pink;
  line-height: 50px;
  text-align: center;
}

.active {
  background-color: red;
}
.c_name{
  width: 100%;
  text-align: center;
  padding-top: 20px;
}
.goods-box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

}
.goods-item{
  width: 80px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.goods-img{
  width: 50px;
}

.bottom{
  width: 100%;
  height: 60px;
  text-align: center;
  line-height: 80px;
  font-size: 10px;
  color: rgb(139, 135, 135);
}

到此这篇关于微信小程序实现商品数据联动的文章就介绍到这了,更多相关小程序商品数据联动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

微信小程序实现商品属性联动选择

本文实例为大家分享了微信小程序实现商品属性联动选择的具体代码,供大家参考,具体内容如下效果演示: 代码示例 1.commodity.xml   <view class="commodity_attr_list">  <view class="a
微信小程序基于数据库时间实现商品倒计时功能(可重用代码)

最近做拍卖小程序,里面有一个需求是监控拍卖时间,需要对时间进行动态的倒计时显示从构思开始,做这个倒计时也花了我4个小时多,也遇到了很多问题,现在我把完整的功能给实现了,可以拿来套用,只需要传入你自己数据库的时间即可. 1.第一个函数 //传入数据库结束时间参数并计算倒计时 countdown(endTime){//取出竞拍结束时间,精确到秒,如果数据库设置的是精确到毫秒,这里需要再除以1000 let auctionEndtime = res.data.end_time console.log
微信小程序实现商品数据联动效果

微信小程序实现商品数据联动直接复制代码更改可以看出效果,然后根据自己想要进行调整注: 以下商品图片用于测试,如有侵权请通知,会删除相关图片. js部分: // pages/demo1/demo1.js //存放右侧分类的高度累加数组 var heightList = []; //记录scroll-view滚动过程中距离顶部的高度 var distanceToTop = 0; Page({ /** * 页面的初始数据 */ data: { curActive: 0, //当前选中项 produ
微信小程序实现菜单左右联动效果

本文实例为大家分享了微信小程序实现菜单左右联动效果的具体代码,供大家参考,具体内容如下原理首先是获取数据,并且获取数据的长度(需要根据长度来计算元素的高度),通过遍历数据的内容通过题目和元素个数的相加得到高度,当消失高度小于等于某个元素的高度就设定索引值给左边的菜单目录实现右边滑动左边联动,左边的菜单点击事件联动比较简单就不说代码实现 wxml <view class="menu"> <view class="left-box"
微信小程序scroll-view实现左右联动效果

微信小程序利用scroll-view实现左右联动,供大家参考,具体内容如下点击左边的按钮时,右边可以跳动到指定的位置首先要注意使用scroll-view竖屏滚动,需要给scroll-view固定高度其次在点击时,需要给需要滚动的scroll-view加上scroll-into-view,其值应该是子元素的id,且id不能以数字开头滚动右边,左边菜单跳到相应的位置其实现的思想是,在右边滚动屏滚动时,得到滚动的距离.将右边滚动屏中各模块到达顶部的距离计算出来放到一个数组中.第一个模块的滚
微信小程序实现左滑动删除效果

最近做微信小程序项目遇到左滑动效果,比如在我的收藏页面,我的历史浏览记录页面,我的购物车页面,大多数都会用到这种效果,我把代码复制出来,供大家参考,用的时候直接用模板,再此基础上修改就行. wxml中的代码: <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index=" {{index}}" bindtouchstart="touchstar
微信小程序实现左右列表联动

本文实例为大家分享了微信小程序实现左右列表联动的具体代码,供大家参考,具体内容如下效果图: 直接上代码: wxml界面: <view class='header'> <text class='headerClass'>分类</text> <text class='headerPin'>/品牌</text> <view class="search"> <image src='/images/搜索.png'&g
微信小程序实现侧边栏二级联动

本文实例为大家分享了微信小程序实现侧边栏二级联动的具体代码,供大家参考,具体内容如下实现效果如下实现步骤样式布局(.wxml文件) <scroll-view scroll-y="{{true}}" style="height:{{height}}px;" class="nav-right-menu">  <vi
详解微信小程序用定时器实现倒计时效果

平常在微信小程序开发的时候,因项目的需求,倒计时必不可少,下面主要讲解定时器在微信小程序中的使用. 这里要先声明一点的就是,该篇主要实现倒计时功能,而且实现是时长较短的倒计时,其他的优化什么的不作主要考虑. 如果实现简单的60s倒计时效果,我们可直接使用setInterval即可,但是在微信小程序中,我们需要用微信小程序的语法,这时就会遇到一个难题,那就是怎么关闭定时器的问题,下面给出实例. WXML代码 <view class='countDown'>倒计时:<text style='
微信小程序实现单选选项卡切换效果

这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法,供大家参考,具体内容如下效果如图: wxml: <view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem"> <view class=
微信小程序实现卡片层叠滑动效果

本文实例为大家分享了微信小程序之卡片层叠滑动效果的具体代码,供大家参考,具体内容如下代码: js: // index/gun/jsSwiper2/jsSwiper2.js Page({ /** * 页面的初始数据 */ data: { startX: 0, endX: 0, iCenter: 3, datas: [{ id: 1, zIndex: 2, opacity: 0.2, left: 40, iamge: "../../images/1.jpg", animation: nu

微信小程序实现商品数据联动效果

微信小程序实现商品数据联动

相关推荐

随机推荐