vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)滑動(dòng)頁(yè)面
本文實(shí)例為大家分享了vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)滑動(dòng)頁(yè)面,供大家參考,具體內(nèi)容如下
界面如下:
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>好評(píng){{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', () => { //回調(diào)函數(shù),等到action中執(zhí)行 this.$nextTick(() => { //頁(yè)面更新后再使用滾動(dòng)組件,獲取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>//也可以不用計(jì)算屬性,直接在data中定義currentIndex,改動(dòng)時(shí)賦新值,那頁(yè)面自然跟著更新
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 }
關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 使用Vue-scroller頁(yè)面input框不能觸發(fā)滑動(dòng)的問(wèn)題及解決方法
- vue實(shí)現(xiàn)頁(yè)面切換滑動(dòng)效果
- vue 路由頁(yè)面之間實(shí)現(xiàn)用手指進(jìn)行滑動(dòng)的方法
- 基于Vue實(shí)現(xiàn)頁(yè)面切換左右滑動(dòng)效果
- JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證(2)
- JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證
- JavaScript 獲取滾動(dòng)條位置并將頁(yè)面滑動(dòng)到錨點(diǎn)
- js實(shí)現(xiàn)滑動(dòng)到頁(yè)面底部自動(dòng)加載更多功能
- js/jquery控制頁(yè)面動(dòng)態(tài)加載數(shù)據(jù) 滑動(dòng)滾動(dòng)條自動(dòng)加載事件的方法
- vue/js實(shí)現(xiàn)頁(yè)面自動(dòng)往上滑動(dòng)效果
相關(guān)文章
antd?vue?表格rowSelection選擇框功能的使用方式
這篇文章主要介紹了antd?vue?表格rowSelection選擇框功能的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。2022-12-12vue使用axios實(shí)現(xiàn)動(dòng)態(tài)追加數(shù)據(jù)
在vuejs中使用axios時(shí),有時(shí)候需要追加數(shù)據(jù),比如,移動(dòng)端下拉觸底加載,分頁(yè)加載,滑動(dòng)滾動(dòng)條等,下面小編就來(lái)為大家介紹一下如何使用使用axios實(shí)現(xiàn)動(dòng)態(tài)追加數(shù)據(jù)吧2023-10-10vue中computed順序、watch順序、響應(yīng)次數(shù)使用
這篇文章主要介紹了vue中computed順序、watch順序、響應(yīng)次數(shù)使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08Vue中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說(shuō)明
這篇文章主要介紹了Vue中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05vue+element UI實(shí)現(xiàn)樹(shù)形表格
這篇文章主要為大家詳細(xì)介紹了vue+element UI實(shí)現(xiàn)樹(shù)形表格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12vue2.0與vue3.0及vue與react的區(qū)別及說(shuō)明
這篇文章主要介紹了vue2.0與vue3.0及vue與react的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10el-form組件使用resetFields重置失效的問(wèn)題解決
用el-form寫(xiě)了包含三個(gè)字段的表單,使用resetFields方法進(jìn)行重置,發(fā)現(xiàn)點(diǎn)擊重置或要清空校驗(yàn)時(shí)是失效的,所以本文給大家介紹了el-form組件使用resetFields重置失效的問(wèn)題解決,需要的朋友可以參考下2023-12-12vue實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)動(dòng)態(tài)菜單
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)動(dòng)態(tài)菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04