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


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 相关文章推荐
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
微信小程序基于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
php防注
2007/01/15 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
Python编写屏幕截图程序方法
2015/02/18 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python装饰器简单用法实例小结
2018/12/03 Python
python实现车牌识别的示例代码
2019/08/05 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
Python类的继承super相关原理解析
2020/10/22 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
小学六年级学生评语
2014/04/22 职场文书
三方协议书范本
2014/04/22 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
亮剑精神观后感
2015/06/05 职场文书
环保证明
2015/06/23 职场文书
2016党校学习心得体会
2016/01/07 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL