跟做慕课网的vue高仿外卖项目中用到了一个很好用的插件BScroll,用来计算左侧menu栏对应右侧foods栏相应显示的食物区,如果不用插件就比较费事了,因此这里分享一下这个插件的简单使用:
一、项目中下载,并引入
在配置文件package.json中引入版本
"dependencies": { "better-scroll": "^0.1.7" }
然后进入项目目录,打开cmd更新配置
npm i (i是install缩写)
最后引入,比如我在项目goods组件中使用则:
import BScroll from 'better-scroll';
二、举个栗子
需求是处于当前比如热销榜栏目,则菜单栏高亮。滚动到下一栏高亮栏目则下一栏菜单高亮。点击菜单中某一栏菜单该栏目高亮并且跳转到对应食物区。
下面是foods组件中的代码
template:
<template> <div class="goods"> <div class="menu-wrap" ref="menuWrap">//菜单栏 <ul> <li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)"> <span class="text border-1px"> <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}} </span> </li> </ul> </div> <div class="foods-wrap" ref="foodsWrap">//食物栏 </div> </div> </template>
script
<script type="text/ecmascript-6"> import Vue from 'vue'; import BScroll from 'better-scroll'; import shopcart from '@/components/shopcart/shopcart'; export default { props: {//接收父组件传的数据 seller: { type: Object } }, data () { return { goods: [], listHeight: [],//菜单中一个菜单栏目的高度 scrollY: 0//定义的Y滚动轴及初始值 }; }, computed: {//计算属性 currentIndex () {//当前菜单栏在整个菜单中的下标index for (let i = 0; i < this.listHeight.length; i++) {//遍历菜单中每个栏目的高度 let height1 = this.listHeight[i];//第i个栏目的高度 let height2 = this.listHeight[i + 1];//第i+1个栏目的高度 if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {//根据当前滚动轴的位置得出index(如果第二个栏目不存在即第一个栏目是最后一个)或者(当前栏目高度大于等于第一个并且当前滚动轴小于第二个栏目高度) return i;//如果满足则返回index } } return 0;//初始值0 } }, created () { Vue.prototype.$http.get('/api/goods') .then(res => { this.goods = res.data.data; this.$nextTick(() => {// this._initScroll(); this._calculateHeight(); }); }); this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']; }, methods: { selectMenu (index, event) { if (!event._constructed) { return; } let foodList = this.$refs.foodsWrap.getElementsByClassName('food-list-hook'); let el = foodList[index]; this.foodsScroll.scrollToElement(el, 300); }, _initScroll () { this.menuScroll = new BScroll(this.$refs.menuWrap, { click: true }); this.foodsScroll = new BScroll(this.$refs.foodsWrap, {probeType: 3 }); this.foodsScroll.on('scroll', (pos) => { this.scrollY = Math.abs(Math.round(pos.y)); console.log(this.scrollY); }); }, _calculateHeight () { let foodList = this.$refs.foodsWrap.getElementsByClassName('food-list-hook'); let height = 0; this.listHeight.push(height); for (let i = 0; i < foodList.length; i++) { let item = foodList[i]; height += item.clientHeight; this.listHeight.push(height); } } } }; </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]