vue基于better-scroll实现左右联动滑动页面


Posted in Javascript onJune 30, 2020

本文实例为大家分享了vue基于better-scroll实现左右联动滑动页面,供大家参考,具体内容如下

界面如下:

vue基于better-scroll实现左右联动滑动页面

vue模板

<template>
 <div class="goods">
 <div class="menu-wrapper">
 <ul>
 <li class="menu-item" v-for="(good, index) in goods" :key="index" 
  :class="{current: currentIndex===index}" @click="clickMenuItem(index)">
  <span class="text bottom-border-1px">
  <img :src="good.icon" class="icon" v-if="good.icon">
  {{good.name}}
  </span> 
 </li>
 </ul>
 </div>
 <div class="foods-wrapper">
 <ul ref="foodsWrapperUl">
 <li class="food-list food-list-hook" v-for="(good, index) in goods" :key="index">
  <h1 class="title">{{good.name}}</h1>
  <ul>
  <li class="food-item bottom-border-1px" v-for="(food, index) in good.foods" :key="index">
  <div class="icon">
  <img :src="food.icon" width="57" height="57" alt="">
  </div>
  <div class="content">
  <h2 class="name">{{food.name}}</h2>
  <p class="desc">{{food.description}}</p>
  <div class="extra">
   <span class="count">月售{{food.sellCount}}份</span>
   <span>好评{{food.rating}}%</span>
  </div>
  <div class="price">
   <span class="now">¥{{food.price}}</span>
   <span class="old" v-if="food.oldPrice">¥{{food.oldPrice}}</span>
  </div>
  <div class="cartcontrol-wrapper"><cartcontrol :food="food"/></div>
  </div>
  </li>
  </ul>
 </li>
 </ul>
 </div>
 </div>
</template>

<script>
 import BScroll from 'better-scroll'
 import { mapState } from 'vuex'
 import CartControl from "../../../components/CartControl/CartControl"
 export default {
 data() { 
 return {
 scrollY: 0,
 tops: []
 }
 },
 mounted () {
 this.$store.dispatch('getShopGoods', () => { //回调函数,等到action中执行
 this.$nextTick(() => { //页面更新后再使用滚动组件,获取DOM高度
  this._initScroll();
  this._initTops();
 })
 })
 },
 methods: {
 _initScroll() {
 new BScroll('.menu-wrapper', {
  click:true
 })

 this.foodsScroll = new BScroll('.foods-wrapper', {
  probeType: 2,
  click: true
 })

 this.foodsScroll.on('scroll', (pos) => {
  this.scrollY = Math.abs(pos.y);
 })

 this.foodsScroll.on('scrollEnd', (pos) => {
  this.scrollY = Math.abs(pos.y);
 })
 },

 _initTops () {
 const tops = [];
 let top = 0;
 tops.push(top);
 const lis = this.$refs.foodsWrapperUl.getElementByClassName('food-list-hook');
 Array.prototype.slice.call(lis).forEach((li, index) => {
  top += li.clientHeight;
  tops.push(top);
 })
 this.tops = tops;
 },

 clickMenuItem (index) {
 const top = this.tops[index];
 this.scrollY = top;
 this.foodsScroll.scrollTo(0, -top, 300)
 }
 },

 computed: {
 ...mapState(['goods']),
 currentIndex () {
 return this.tops.findIndex((top, index) => {
  return this.scrollY>=top && this.scrollY<this.tops[index+1]
 })
 }
 }
 }
</script>//也可以不用计算属性,直接在data中定义currentIndex,改动时赋新值,那页面自然跟着更新

state.js

goods: [], // 商品列表

action.js

//异步获取商品列表
 async getShopGoods ({commit}, callback) {
 const result = await reqShopGoods();
 const goods = result.data;
 commit(RECEIVE_GOODS, {goods});
 callback && callback();
 }

mutation.js

[RECEIVE_GOODS](state, {goods}) {
 state.goods = goods
 }

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

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

Javascript 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
js实现登录验证码
Dec 22 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
JavaScript实现区块链
Mar 14 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
Postman动态获取返回值过程详解
Jun 30 #Javascript
JS简易计算器实例讲解
Jun 30 #Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 #Javascript
JSON获取属性值方法代码实例
Jun 30 #Javascript
JS猜数字游戏实例讲解
Jun 30 #Javascript
vue实现评价星星功能
Jun 30 #Javascript
Json实现传值到后台代码实例
Jun 30 #Javascript
You might like
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
Javascript的闭包详解
2014/12/26 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
图解js图片轮播效果
2015/12/20 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
vue slots 组件的组合/分发实例
2018/09/06 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
python处理按钮消息的实例详解
2017/07/11 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
python reduce 函数使用详解
2017/12/05 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
python 不以科学计数法输出的方法
2018/07/16 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Django REST framework 视图和路由详解
2019/07/19 Python
python列表推导式入门学习解析
2019/12/02 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
铭立家具面试题
2012/12/06 面试题
Linux文件系统类型
2012/09/16 面试题
暑期教师培训方案
2014/06/07 职场文书
解除劳动合同协议书
2014/09/17 职场文书
青涩记忆观后感
2015/06/18 职场文书