創(chuàng)新互聯(lián)www.cdcxhl.cn八線動(dòng)態(tài)BGP香港云服務(wù)器提供商,新人活動(dòng)買多久送多久,劃算不套路!
創(chuàng)新互聯(lián)成立于2013年,先為大通等服務(wù)建站,大通等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為大通企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。這篇文章主要介紹vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)頁(yè)面的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
界面如下:
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"> <h2 class="title">{{good.name}}</h2> <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"> <h3 class="name">{{food.name}}</h3> <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è)面自然跟著更新
分享文章:vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)頁(yè)面的方法-創(chuàng)新互聯(lián)
路徑分享:http://muchs.cn/article48/cdioep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、服務(wù)器托管、靜態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、App設(shè)計(jì)、品牌網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容