微信小程序实现购物页面左右联动

本文实例为大家分享了微信小程序实现购物页面左右联动的具体代码,供大家参考,具体内容如下

效果图:

wxml

<view class="pro-container">
 <scroll-view class="left-menu" scroll-y scroll-with-animation="true" scroll-top="{{leftMenuTop}}">
  <view class="menu-item {{index===currentActiveIndex?'menu-active':''}}" wx:for="{{item}}" wx:key="{{item.index}}" id="{{index}}" catchtap='changeMenu' >{{item.typename}}</view>
 </scroll-view>
 <scroll-view v-if="item!=''" class="right-pro" bindscroll = "scroll" scroll-y scroll-with-animation="true" scroll-top="{{rightProTop}}">
  <view class="pro-item" wx:for="{{item}}">
    <view class="item-header">{{item.typename}}</view>
    <view class="pro-item-container">
      <view wx:for="{{item.shop_goods}}" wx:key="{{index}}" class="pro-item-item">
      <image lazy-load="true" src="{{item}}"></image>
      <text>{{item.goodname}}</text>
     </view>
    </view>
  </view>
 </scroll-view>
</view>

wxss

.left-menu{
 position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 180rpx;
  background-color: #f8f8f8;
  font-size: 32rpx;
}
::-webkit-scrollbar{
 width: 0;
 height: 0;
 color: transparent;
}
.left-menu .menu-item{
 width: calc(100% - 16rpx);
 height: 80rpx;
 padding:0 8rpx;
 line-height: 80rpx;
 text-align: center;
}
.left-menu .menu-item.menu-active{
 border-left:8rpx solid red;
 padding-left: 0;
 background-color: #fff;
}

/* 右边商品区域 */
.right-pro{
 position: absolute;
 left: 180rpx;
 top:0;
 bottom: 0;
 width:calc(100% - 180rpx);
 background-color: #fff;
 display: flex;
 overflow: hidden;
}
.right-pro .pro-item{
 padding:20rpx;
}
.right-pro .item-header{
 display: inline-block;
 font-size: 30rpx;
 line-height: 40rpx;
 color: #fff;
 background-color: red;
 padding:0rpx 30rpx;
 margin: 10rpx auto;
}
.right-pro .pro-item-container{
 font-size: 28rpx;
}
.pro-item-item{
 width: calc((100% - 180rpx) / 2 );
 display:inline-block;
}
.right-pro .pro-item-container image{
 width: 100rpx;
 height: 100rpx;
 display: block;
 margin: 0 auto;
}
.right-pro .pro-item-container text{
 display: block;
 text-align: center;
}

wxjs

let proListToTop = [], menuToTop = [], MENU = 0, windowHeight,timeoutId;
// MENU ==> 是否为点击左侧进行滚动的,如果是,则不需要再次设置左侧的激活状态
Page({
 data: {
  proList: [],
  item: [],
  item2:[
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
   {
    "typename": "服饰",
   },
  ],
  currentActiveIndex: 0
 },
 onLoad: function (options) {
  // ---------------------------ajax----------------------
  var utilMd5 = require('../../utils/md5.js');
  var md5 = utilMd5.hexMD5;
  var timestamp = new Date().getTime();
  var that = this;
  var jsonStr = JSON.stringify({ "shopid": "34" });
  var token = md5(jsonStr + timestamp) + timestamp;
  wx.request({
   url: "https://api.jvjiewang.com/Home/Shop/goods",
   data: {
    jsonStr: jsonStr,
    token: token
   },
   method: 'POST',
   header: {
    "Content-Type": "application/x-www-form-urlencoded"
   },
   success: function (res) {
    console.log(res.data.respond);
    var items = res.data.respond;
    that.setData({
     item: items
    })
   }
  })
//----------------------------ajax----------------------
  // 确保页面数据已经刷新完毕~
  setTimeout(() => {
   this.getAllRects()
  }, 200)
 },
 changeMenu(e) {
  // 改变左侧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) {
  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

  if (menuToTop[i]) {
   console.log(11111)
   // 节流操作
   if(timeoutId){
    clearTimeout(timeoutId)
   }
   timeoutId = setTimeout(()=>{
    console.log(12138)
    self.setData({
     leftMenuTop: (menuToTop[i].top - windowHeight)
    })
   },50)
  } else {
   if (this.data.leftMenuTop === 0) return
   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) {
    proListToTop.push(rect.top)
   })
  }).exec()

  // 获取menu数组的位置信息
  wx.createSelectorQuery().selectAll('.menu-item').boundingClientRect(function (rects) {
   wx.getSystemInfo({
    success: function (res) {
     windowHeight = res.windowHeight / 2
     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
   }
  })
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序实现工作时间段选择

    本文实例为大家分享了微信小程序工作时间段选择的具体代码,供大家参考,具体内容如下 1. 效果图如上,需完成时间段的选择  以及下面的工作日选择  保存按钮为formSubmit提交后台 2.思路: ①时段用picker跟input  如果没有占位字符  则不需要input ②工作日选择用checkbox  多选的样式用label  将checkbox隐藏 ③label的选择后的样式跟取消的样式,这里无需判断checked  当然也可以判断checked  我这里的方法是,先建一个放星期一到星期天

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

    本文实例为大家分享了微信小程序实现商品属性联动选择的具体代码,供大家参考,具体内容如下 效果演示: 代码示例 1.commodity.xml <!-- <view class="title">属性值联动选择</view> --> <!--options--> <view class="commodity_attr_list"> <!--每组属性--> <view class="a

  • 微信小程序实现展示评分结果功能

    本文实例为大家分享了微信小程序实现展示评分结果的具体代码,供大家参考,具体内容如下 星星评分展示1 根据评分展示整颗行星或者半颗星星 星星评分展示2 根据评分按照小数点展示整颗行星或者部分星星 wxml <view class="conmmentbox"> <view class="starbox"> <view class="stars2" style="width: 130rpx"> &

  • 微信小程序实现多个按钮的颜色状态转换

    本文实例为大家分享了微信小程序实现按钮颜色状态转换的具体代码,供大家参考,具体内容如下 效果图片: index.wmxl文件 <block wx:for="{{pres}}"> <view class='foot_tab' data-id="{{index}}" style="{{index==id? 'color:rgb(91, 207, 97)':'color:#ddd'}}" bindtap='changeColor'&g

  • 微信小程序在安卓的白屏问题原因及改进讲解

    在做小程序的时候,做到了一个限时商品售卖,用到了倒计时,因为这个原因导致了安卓手机上使用小程序时,将小程序放入后台运行一段时间后,再次进入小程序后出现了页面白屏或者点击事件失效的情况,这里记录下 1.相关代码文件 我这里是使用了自定义组件的形式来渲染的 外部的引用的自定义组件的wxml文件 /* limitCommodity是一个数组,返回的是商品对象,包含商品价格.商品结束时间.商品图片等 */ <block wx:for="{{limitCommodity}}" wx:key

  • 微信小程序实现联动选择器

    本文实例为大家分享了微信小程序实现联动选择器的具体代码,供大家参考,具体内容如下 picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. 先来看看效果图: 1.普通选择器 mode = selector(默认的) <view class='picker'>普通选择器</view> <!-- value: value值表示选择了让的第几个,index===下标 从0开始

  • 微信小程序时间标签和时间范围的联动效果

    本文实例为大家分享了微信小程序时间标签和时间范围联动的具体代码,供大家参考,具体内容如下 最近忙于一个有关数据管理的微信小程序,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.picker,用wxss对radio按照需求进行重构,picker里边的start和end时间是根据radio来显示的.将start.end时间放在data里,radio发生改变时,改变data中的时间.当picker中的值发生改变时,如果时间范围已经超出了

  • 解决微信小程序中转换时间格式IOS不兼容的问题

    昨天弄一个微信倒计时;遇到了这个为题,调试了才找到问题的所在,然后在网上找了资料才知道这个问题的原因,来是因为IOS系统不支持2018-08-30这样的格式的时间导致的 let olddata ='2018-08-30 11:00:00'; let mydata=new Date(olddata); console.log(mydata); let newdata=mydata.getTime(); 这样的代码安卓手机开发手机和微信小程序编辑器测试都没有问题,唯独IOS获取的日期为不显示,原来I

  • 微信小程序基于picker实现级联菜单

    本文实例为大家分享了微信小程序实现级联菜单的具体代码,供大家参考,具体内容如下 <view > <picker bindchange="bindPickerChange0" value="{{brandindex}}" range="{{brands}}"> <view class="picker"> 品牌:{{brands[brandindex]}} </view> </

  • 微信小程序实现左右列表联动

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

随机推荐