广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现商品数据联动效果
  • 280

0
分享到

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

小程序商品数据联动小程序联动 2022-11-13 14:11:01 280人浏览 泡泡鱼
摘要

微信小程序实现商品数据联动 直接复制代码更改可以看出效果，然后根据自己想要进行调整 注： 以下商品图片用于测试，如有侵权请通知，会删除相关图片。 js部分： // pages/de

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

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

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

在这里插入图片描述

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: '鲍鱼'
          },
        ]
      }
    ]
  },
  
  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);
    })
  },
  
  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);
}

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 微信小程序实现商品数据联动效果

本文链接: https://www.lsjlt.com/news/171658.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 微信小程序实现商品数据联动效果
    微信小程序实现商品数据联动 直接复制代码更改可以看出效果，然后根据自己想要进行调整 注： 以下商品图片用于测试，如有侵权请通知，会删除相关图片。 js部分： // pages/de...
    99+
    2022-11-13
    小程序商品数据联动 小程序联动
  • 微信小程序实现菜单左右联动效果
    本文实例为大家分享了微信小程序实现菜单左右联动效果的具体代码，供大家参考，具体内容如下 原理 首先是获取数据，并且获取数据的长度（需要根据长度来计算元素的高度），通过遍历数据的内容通...
    99+
    2022-11-13
  • 微信小程序scroll-view实现左右联动效果
    微信小程序利用scroll-view实现左右联动，供大家参考，具体内容如下 点击左边的按钮时，右边可以跳动到指定的位置 首先要注意使用scroll-view竖屏滚动，需要给...
    99+
    2022-11-12
  • 微信小程序实现商品分类列表
    本文实例为大家分享了微信小程序实现商品分类列表的具体代码，供大家参考，具体内容如下 一、效果展示 二、代码实现 <!-- wxml --> <view class...
    99+
    2022-11-13
  • 实现微信小程序中的多级联动选择器效果
    实现微信小程序中的多级联动选择器效果，需要具体代码示例随着微信小程序的普及和发展，越来越多的开发者开始关注小程序的开发技巧和实现效果。其中，多级联动选择器是小程序中常见的一种选择器效果，能够提供良好的用户体验和交互效果。本文将介绍如何在微信...
    99+
    2023-11-21
    微信小程序 选择器 多级联动
  • 微信小程序如何实现动画效果
    这篇文章主要为大家展示了“微信小程序如何实现动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“微信小程序如何实现动画效果”这篇文章吧。一、什么是微信小程序？...
    99+
    2022-10-19
  • 微信小程序实现左右联动
    本文实例为大家分享了微信小程序实现左右联动的具体代码，供大家参考，具体内容如下 最近学校课程系统分析项目使用了微信小程序来进行搭建，在选择了点餐项目后，对主页进行实现时，想要实现像麦...
    99+
    2022-11-12
  • 微信小程序实现联动菜单
    最近为了实现课程设计，也做了一些前端的东西，今天想要做一个联动菜单来实现一些功能。实现了，也来做做笔记。 第1步：了解一下 左右侧菜单其实简单来讲就是把一个区域分成左右两个部分。关于...
    99+
    2022-11-12
  • 微信小程序如何实现商品分类列表
    这篇文章主要讲解了“微信小程序如何实现商品分类列表”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“微信小程序如何实现商品分类列表”吧！一、效果展示二、代码实现<!-- wxml...
    99+
    2023-06-30
  • 微信小程序如何实现商品到详情页
    这篇文章给大家分享的是有关微信小程序如何实现商品到详情的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。商品页post.wxmldata-postid="{{index}}...
    99+
    2022-10-19
  • 微信小程序实现商品分类页过程结束
    首先我们来分析下UI小妹发来的产品原型图： 微信小程序商品分类页需要实现 1.单击左边的商品类目，右侧实现联动跳转到对应商品类目标题； 2.触屏拖动右侧商品列表，右侧跳转到对应商品类...
    99+
    2023-05-20
    微信小程序商品分类页 小程序商品分类
  • 微信小程序实现多行文字滚动效果
    本文实例为大家分享了微信小程序实现多行文字滚动的具体代码，供大家参考，具体内容如下 wxml <view class="full" style="height:100%;o...
    99+
    2022-11-11
  • 微信小程序实现页面滚动监听效果
    抱歉，我无法提供具体代码示例。如果你想了解如何在微信小程序中实现页面滚动监听效果，可以通过以下步骤自己尝试：创建一个新的微信小程序项目。在 wxml 文件中编写页面结构，包括需要滚动监听的元素。在 wxss 文件中设置页面样式，包括滚动监听...
    99+
    2023-11-21
    页面滚动 微信小程序 监听效果
  • 微信小程序实现页面过渡动画效果
    微信小程序是一种基于微信平台的小型应用程序，它功能丰富、操作简便，是现代移动互联网时代不可或缺的一部分。小程序在开发过程中，页面过渡动画效果是提升用户体验的重要方法之一。在本文中，我们将介绍如何使用微信小程序实现页面过渡动画效果，并提供具体...
    99+
    2023-11-21
    微信 小程序 页面动画
  • 使用微信小程序实现无限滚动效果
    标题：微信小程序实现无限滚动效果的实例摘要：本文介绍了如何使用微信小程序实现无限滚动效果，并提供了具体代码示例。通过本文，读者可以了解到如何利用微信小程序的组件和API来实现无限滚动效果，使页面在滚动到底部时能够自动加载更多内容。正文：准备...
    99+
    2023-11-21
    微信小程序 实现 无限滚动
  • 使用微信小程序实现文字滚动效果
    使用微信小程序实现文字滚动效果小程序作为一种新兴的应用开发方式，具备快速开发、跨平台、用户友好等特点，已经成为越来越多开发者的首选。在微信小程序中，实现文字滚动效果是一种常见的需求，本文将通过具体的代码示例，介绍如何使用微信小程序实现文字滚...
    99+
    2023-11-21
    微信小程序 实现 文字滚动
  • 微信小程序实现页面跳转动画效果
    微信小程序实现页面跳转动画效果在微信小程序中，页面跳转是一项非常常见的功能。为了提升用户体验，我们可以通过添加动画效果来让页面切换更加流畅和生动。下面我将介绍如何使用微信小程序的API来实现页面跳转动画效果，并附上具体的代码示例。首先，我们...
    99+
    2023-11-21
    动画效果 微信小程序 页面跳转
  • 使用微信小程序实现滑动菜单效果
    使用微信小程序实现滑动菜单效果微信小程序作为一种快速开发并具有广泛应用的工具，为我们提供了多种实现滑动菜单效果的方法。本文将向您展示一种简单而实用的实现方式，帮助您在开发中轻松添加滑动菜单效果。准备工作在开始编码之前，我们需要先创建一个基本...
    99+
    2023-11-21
    微信小程序 实现 滑动菜单
  • 微信小程序实现摇筛子效果
    本文实例为大家分享了微信小程序实现摇筛子效果的具体代码，供大家参考，具体内容如下 1.效果图： 2.HTML代码： <!--pages/game/game.wxml--&...
    99+
    2022-11-12
  • 微信小程序实现九宫格效果
    本文实例为大家分享了微信小程序实现九宫格效果的具体代码，供大家参考，具体内容如下 1.九宫格实现示例图： Tips: 说明： 使用 display: -webkit-flex;对...
    99+
    2022-11-12
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作