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 多行文本框(textarea)高度变化
Jul 03 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
详解原生js实现offset方法
Jun 15 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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
PHP 彩色文字实现代码
2009/06/29 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
Python操作MySQL简单实现方法
2015/01/26 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Numpy中的mask的使用
2018/07/21 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
set在python里的含义和用法
2019/06/24 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
劳动工资科岗位职责范本
2014/03/02 职场文书
通知书大全
2015/04/27 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
结婚典礼致辞
2015/07/28 职场文书