前言
成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站制作、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)濰城,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):18982081108
最近在學(xué)習(xí)小程序,實(shí)現(xiàn)了左右聯(lián)動(dòng)的功能,記錄一下思緒,方便以后參考。
最終的界面如下, 點(diǎn)擊左邊任意一個(gè)項(xiàng)目,右邊會(huì)跳到相應(yīng)項(xiàng)目的起始位置,右邊滑動(dòng),左則會(huì)跳到相應(yīng)的位置。
實(shí)現(xiàn)思路
在這里,右則每一項(xiàng)的高度都是固定的,方便定位當(dāng)前滑動(dòng)距離在哪一個(gè)大項(xiàng)(左則)里。右則的 scroll-view 使用了一項(xiàng)關(guān)鍵的屬性:scroll-into-view,這個(gè)屬性用來(lái)確定 scrollTop 的值的,當(dāng) scroll-into-view 的值和 scroll-view 里面的元素的id的值相等時(shí),scroll-view 會(huì)定位到該元素,scrollTop 的值就是滑動(dòng)到該元素的值。
做這個(gè)功能的時(shí)候,遇到一個(gè)問(wèn)題,就是右則的小項(xiàng)種類(lèi)不多的時(shí)候,例如某個(gè)類(lèi)目只有1~2個(gè),那么點(diǎn)擊左則的大項(xiàng)的時(shí)候,會(huì)出現(xiàn)點(diǎn)擊不到的現(xiàn)象。這里可以用點(diǎn)小技巧來(lái)解決:
點(diǎn)擊左則大項(xiàng)的時(shí)候,設(shè)置當(dāng)前點(diǎn)擊標(biāo)記為true,設(shè)置 classifySeleted 為當(dāng)前點(diǎn)擊的項(xiàng)目。 然后在滑動(dòng)觸發(fā)函數(shù)(onGoodsScroll)里面,判斷當(dāng)前觸發(fā)滑動(dòng)是否點(diǎn)擊產(chǎn)生的,如果是,則不設(shè)置 classifySeleted 的值,否則就計(jì)算 classifySeleted 的值并設(shè)置。
示例代碼:
wxml代碼如下:
<view class="content-container"> <scroll-view class="classify-container" scroll-y="true"> <view class="classify {{classifySeleted==classify.typeId?'active':''}}" wx:for="{{cakeTypes}}" wx:for-item="classify" wx:key="id" data-id="{{classify.typeId}}" bindtap="tapClassify"> <view class="name">{{classify.typeName}}</view> </view> </scroll-view> <scroll-view class="goods-container" scroll-y="true" scroll-into-view="{{'inToView' + typeIndex}}" bindscroll="onGoodsScroll" scroll-top="{{scrollTop}}"> <view wx:for="{{cakeTypes}}" wx:for-item="classify" wx:key="id"> <view class="title" id="{{'inToView'+classify.typeId}}">{{classify.typeName}}</view> <view class="goods" wx:for="{{classify.productIds}}" wx:for-item="cake" wx:key="id"> <image class="pic" src="{{cake.imgSrc}}" data-src="{{cake.imgSrc}}" data-list="{{cake.imgSrc}}" bindtap="tapImg"></image> <view class="name ellipsis">{{cake.name}}</view> <view class="sold">{{cake.introduce}}</view> <view class="price">¥{{cake.price}}</view> </view> </view> </scroll-view> </view>
js代碼如下:
onGoodsScroll: function (e) { var scrollTop = e.detail.scrollTop; var h = 0; var classifySeleted = this.data.classifySeleted; var titleHeight = Math.ceil(70 * this.data.percent); var itemHeight = Math.ceil(180 * this.data.percent); this.data.cakeTypes.forEach(function (classify, i) { console.log("h:" + h + " scrollTop:" + scrollTop); var _h = titleHeight + classify.productIds.length * itemHeight; if (scrollTop >= h - 10) { classifySeleted = classify.typeId; } h += _h; }); if (this.data.isTap) { this.setData ({ isTap: false }) } else { this.setData({ classifySeleted: classifySeleted }); } }, tapClassify: function (e) { var id = e.target.dataset.id; this.setData({ isTap: true, classifySeleted: id, typeIndex: id }); },
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。
文章標(biāo)題:微信小程序?qū)崿F(xiàn)左右聯(lián)動(dòng)的實(shí)戰(zhàn)記錄
網(wǎng)址分享:http://muchs.cn/article14/pgdsde.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司、虛擬主機(jī)、定制網(wǎng)站、Google、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(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í)需注明來(lái)源: 創(chuàng)新互聯(lián)