时间:2021-05-26
本文实例为大家分享了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组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
根据vue-music视频中slider组建的使用,当安装新版本的better-scroll,轮播组件,不能正常轮播这是因为,better-scroll发布新版
本文实例为大家分享了vue滚动插件better-scroll的具体代码,供大家参考,具体内容如下1.概述1.1说明better-scroll是一款重点解决移动端
better-scroll是什么better-scroll是一款重点解决移动端(已支持PC)各种滚动场景需求的插件。它的核心是借鉴的iscroll的实现,它的A
本文实例为大家分享了vue基于better-scroll仿京东分类列表的具体代码,供大家参考,具体内容如下效果图和目录结构1、main.js(需要安装route
最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候,点击事件失效,