vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面
本文實例為大家分享了vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面,供大家參考,具體內(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>好評{{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(() => { //頁面更新后再使用滾動組件,獲取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 }
關(guān)于vue.js組件的教程,請大家點擊專題vue.js組件學(xué)習(xí)教程進行學(xué)習(xí)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
antd?vue?表格rowSelection選擇框功能的使用方式
這篇文章主要介紹了antd?vue?表格rowSelection選擇框功能的使用方式,具有很好的參考價值,希望對大家有所幫助。以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。2022-12-12vue使用axios實現(xiàn)動態(tài)追加數(shù)據(jù)
在vuejs中使用axios時,有時候需要追加數(shù)據(jù),比如,移動端下拉觸底加載,分頁加載,滑動滾動條等,下面小編就來為大家介紹一下如何使用使用axios實現(xiàn)動態(tài)追加數(shù)據(jù)吧2023-10-10vue中computed順序、watch順序、響應(yīng)次數(shù)使用
這篇文章主要介紹了vue中computed順序、watch順序、響應(yīng)次數(shù)使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08vue2.0與vue3.0及vue與react的區(qū)別及說明
這篇文章主要介紹了vue2.0與vue3.0及vue與react的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10el-form組件使用resetFields重置失效的問題解決
用el-form寫了包含三個字段的表單,使用resetFields方法進行重置,發(fā)現(xiàn)點擊重置或要清空校驗時是失效的,所以本文給大家介紹了el-form組件使用resetFields重置失效的問題解決,需要的朋友可以參考下2023-12-12vue實現(xiàn)三級聯(lián)動動態(tài)菜單
這篇文章主要為大家詳細介紹了vue實現(xiàn)三級聯(lián)動動態(tài)菜單,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04