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


Posted in Javascript onFebruary 15, 2019

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

效果图:

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

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
   }
  })
 }
})

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

Javascript 相关文章推荐
Javascript 面向对象 重载
May 13 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
JavaScript 作用域scope简单汇总
Oct 23 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
Node 模块原理与用法详解
May 13 Javascript
微信小程序基于picker实现级联菜单
Feb 15 #Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 #Javascript
详解react-refetch的使用小例子
Feb 15 #Javascript
小程序实现多列选择器
Feb 15 #Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 #jQuery
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 #Javascript
微信小程序实现联动选择器
Feb 15 #Javascript
You might like
把77A收信机改造成收音机
2021/03/02 无线电
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php session的应用详细介绍
2017/03/22 PHP
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
javascript闭包入门示例
2014/04/30 Javascript
angularjs基础教程
2014/12/25 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
寻找网站后台地址的python脚本
2014/09/01 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
Python字符串及文本模式方法详解
2020/09/10 Python
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
好的自荐信的要求
2013/10/30 职场文书
迟到检讨书800字
2014/01/13 职场文书
霸王洗发水广告词
2014/03/14 职场文书
中层干部培训方案
2014/06/16 职场文书
房地产端午节活动方案
2014/08/24 职场文书
关于环保的活动方案
2014/08/25 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
Go timer如何调度
2021/06/09 Golang