小程序自定義索引菜單
更新時(shí)間：2022年07月17日 11:47:53 作者：摯友陽光
這篇文章主要為大家詳細(xì)介紹了小程序自定義索引菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了小程序自定義索引菜單的具體代碼，供大家參考，具體內(nèi)容如下
<view class="indexes_chunk" wx:for="{{brandIndexList.brandGroupList}}" wx:key="item">
? ? ?<view class="letter ancehor-{{item.indexLetter}}">{{item.indexLetter}}</view>
? ? ?<view class="choice" wx:for="{{item.brandList}}" wx:for-item="items" wx:key="items" wx:for-index="cindex">
? ? ? ? ? <text class="text actives">{{items.enName}}{{items.cnName}}</text>
? ? ? ? ? <text class="iconfont icon-gouxuan"></text>
? ?</view>
</view>主要代碼：
function throttle(fn, interval) {
? ? var enterTime = 0;//觸發(fā)的時(shí)間
? ? var gapTime = interval || 300 ;//間隔時(shí)間，如果interval不傳，則默認(rèn)300ms
? ? return function() {
? ? ? var context = this;
? ? ? var backTime = new Date();//第一次函數(shù)return即觸發(fā)的時(shí)間
? ? ? if (backTime - enterTime > gapTime) {
? ? ? ? fn.call(context,arguments);
? ? ? ? enterTime = backTime;//賦值給第一次觸發(fā)的時(shí)間，這樣就保存了第二次觸發(fā)的時(shí)間
? ? ? }
? ? };
};
data:{
?? ? ?brandIndexList:{
? ? ? ? ? ? brandGroupList:[
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? brandList:[
? ? ? ? ? ? ? ? ? ? ? ? {brandId:1, cnName: "愛馬仕A", enName: "Hermes", indexLetter: "A"}
? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? indexLetter: "A"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? brandList:[
? ? ? ? ? ? ? ? ? ? ? ? {brandId:2, cnName: "愛馬仕B", enName: "Hermesss", indexLetter: "B"}
? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? indexLetter: "B"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? brandList:[
? ? ? ? ? ? ? ? ? ? ? ? {brandId:3, cnName: "愛馬仕G", enName: "Hermes", indexLetter: "G"}
? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? indexLetter: "G"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? brandList:[
? ? ? ? ? ? ? ? ? ? ? ? {brandId:4, cnName: "愛馬仕M", enName: "Hermesss", indexLetter: "M"}
? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? indexLetter: "M"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? brandList:[
? ? ? ? ? ? ? ? ? ? ? ? {brandId:5, cnName: "愛馬仕P", enName: "Hermesss", indexLetter: "P"}
? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? indexLetter: "P"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? brandList:[
? ? ? ? ? ? ? ? ? ? ? ? {brandId:6, cnName: "愛馬仕V", enName: "Hermesss", indexLetter: "V"}
? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? indexLetter: "V"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ],
? ? ? ? ? ? indexLetterList: ["A", "B", "G", "M", "P", "V"]
? ? ? ? }，
? ?letterNodes:[],//索引菜單 全部節(jié)點(diǎn)位置
? ?letterIndex:0,
}
? onReady(){
? ? ?
? ? ? ? let self = this;
? ? ? ? let indexLetterList = self.data.brandIndexList.indexLetterList,
? ? ? ? ? ? letterNodes = self.data.letterNodes,
? ? ? ? ? ? nodes = '.ancehor-',
? ? ? ? ? ? arrs = [];
? ? ? ? ? ? // 獲取所有索引錨點(diǎn)節(jié)點(diǎn)
? ? ? ? ? ? indexLetterList.forEach((item)=>{
? ? ? ? ? ? ? ? arrs.push(nodes+item);
? ? ? ? ? ? ? ? if(arrs.length == indexLetterList.length){
? ? ? ? ? ? ? ? ? ? self.getDoms(arrs.join(','),(res)=>{
? ? ? ? ? ? ? ? ? ? ? ? letterNodes = res.map((item)=>{return item.top-88});
? ? ? ? ? ? ? ? ? ? ? ? self.setData({
? ? ? ? ? ? ? ? ? ? ? ? ? ? letterNodes:letterNodes
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? wx.hideLoading();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? },
? ? // 動(dòng)態(tài)獲取節(jié)點(diǎn)
? ? ?getDoms(node,success){
? ? ? ? let self = this,
? ? ? ? ? ? query = wx.createSelectorQuery();
? ? ? ? ? ? setTimeout(()=>{
? ? ? ? ? ? ? ? query.selectAll(node).boundingClientRect((res)=>{
? ? ? ? ? ? ? ? ? ? success && success(res);
? ? ? ? ? ? ? ? }).exec()
? ? ? ? ? ? },1000);
? ? },
? ? ?// 索引菜單點(diǎn)擊滾動(dòng)
? ? letterClick(e){
? ? ? ? let self = this,
? ? ? ? ? ? index = e.currentTarget.dataset.index,
? ? ? ? ? ? letterNodes = self.data.letterNodes;
? ? ? ? ? ? wx.pageScrollTo({
? ? ? ? ? ? ? ? scrollTop: letterNodes[index]
? ? ? ? ? ? })
? ? },
? ? ?// 頁面滾動(dòng)
? ? onPageScroll:throttle(function(e){
? ? ?let self = this,
? ? ? ? ?scrollTop = e[0].scrollTop,
? ? ? ? ?stickyTop = self.data.stickyTop,
? ? ? ? ?letterNodes = self.data.letterNodes,
? ? ? ? ?showSticky = self.data.showSticky,
? ? ? ? ?letterIndex = self.data.letterIndex;
? ? ? ? // 顯示右側(cè)索引
? ? ? ? if(scrollTop>=stickyTop){
? ? ? ? ? ? showSticky = true;
? ? ? ? }else{
? ? ? ? ? ? showSticky = false;
? ? ? ? }
? ? ? ? //滾動(dòng)定位索引
? ? ? ? letterNodes.forEach((item,index)=>{
? ? ? ? ? ? if(scrollTop>=item){
? ? ? ? ? ? ? ? letterIndex = index;
? ? ? ? ? ? ? ? // console.log(index)
? ? ? ? ? ? }
? ? ? ? })
? ? ??
? ? ? ? // console.log(scrollTop)
? ? ? ? self.setData({
? ? ? ? ? ? showSticky:showSticky,
? ? ? ? ? ? letterIndex:letterIndex
? ? ? ? });
? ? },10)以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
layUI的驗(yàn)證碼功能及校驗(yàn)實(shí)例
今天小編就為大家分享一篇layUI的驗(yàn)證碼功能及校驗(yàn)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家詳細(xì)介紹了使用JS實(shí)現(xiàn)簡單的圖片切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要給大家介紹了關(guān)于JSON.stringify使用的相關(guān)資料, JSON.stringify()方法是將一個(gè)JavaScript值(對(duì)象或者數(shù)組)轉(zhuǎn)換為一個(gè) JSON字符串,需要的朋友可以參考下2021-06-06
JavaScript斷言與類型守衛(wèi)及聯(lián)合聲明超詳細(xì)介紹
這篇文章主要介紹了JavaScript斷言與類型守衛(wèi)及聯(lián)合聲明，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
這篇文章主要介紹了javascript刷新父頁面方法匯總詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了webpack4從0搭建組件庫的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Option 對(duì)象代表 HTML 表單中下拉列表中的一個(gè)選項(xiàng)。在 HTML 表單中 <option> 標(biāo)簽每出現(xiàn)一次，一個(gè) Option 對(duì)象就會(huì)被創(chuàng)建。您可通過表單的 elements[] 數(shù)組訪問一個(gè) Option 對(duì)象，或者通過使用 document.getElementById()。2015-05-05
JavaScript實(shí)現(xiàn)鼠標(biāo)移入隨機(jī)變換顏色
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)鼠標(biāo)移入隨機(jī)變換顏色的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
小程序怎樣讓wx.navigateBack更好用的方法實(shí)現(xiàn)
這篇文章主要介紹了小程序怎樣讓wx.navigateBack更好用的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
移動(dòng)端web滾動(dòng)分頁的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端web滾動(dòng)分頁的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05