本文主要介紹小程序好友(小程序好友在哪里用 怎么用)，下面一起看看小程序好友(小程序好友在哪里用 怎么用)相關資訊。
小程序開發(fā)的好友列表字母列表的對應位置。
前言:
在小程序中實現(xiàn)了點擊好友列表右側字母列表跳轉(zhuǎn)到相應位置的效果。我寫了一個demo，核心部分很簡單，評論不多。有問題請加群問我。
關鍵技術點:
1.滾動到視圖，滾動動畫。子視圖滾動組件的滾動屬性。2、小程序的觸摸事件的應用。3.js定時器的應用。
查看頁面代碼:
index.wxml
class = 集裝箱與運輸滾動y類= 信息與廣告id = 信息與廣告帶動畫的滾動200 滾動進入視圖= { { toview } } style = height cho 1-@ . com { { height } } px； class = iitem id = { { item.id } } wx: for = { { info _ list } } wx: key = 1 {{item.id}}。{ item.desc } } class = 字母{{active == true？;activ: ; } } bindtouchstart = 開始 bindtouchmove = 移動 bindtouchend = 結束 class = 訴訟律師和律師bindtap = 羽絨 數(shù)據(jù)索引= 999 class = 訴訟律師和律師wx: for = { { letter _ list } } bindtap = 羽絨 wx: for-index = 指數(shù)和指數(shù)wx: k: { { letter _ height } } px； { item } } class = 提示與建議隱藏= { { hide } } {{curview}} js代碼:
索引. js
//index.js//獲取應用程序?qū)嵗齝onst app = g: { l:[]，info_list:[]，hid: true，activ: fals: ;a 、curvi: ;a 、l: 18 }、onload:函數(shù){ this.active = falsethis.timer = nullvar letter _ list =[ ;a ， b ;， c ， d ， 測試的演示。1.目標是通過點擊好友列表的第一個字母，跳轉(zhuǎn)到相應的好友位置。2.目標是通過點擊好友列表的第一個字母跳轉(zhuǎn)到相應的好友位置 ；info _ list . push(obj)；} this . s: app . global data . h: info _ list，l: l: 100 * 26 25 })；}、start:函數(shù)(e){ this . setdata({ activ:真，hid:假}) }、:函數(shù)(e) { if (this.timer) { clear超時(this . timer)；this.timer = null} var movey = e . changed touches[ 0 ].clienty - 18，那個=這個；var curindex = parse int(movey/18)；var view = this . data . letter _ list[curind:觀，activ:假})；如果(！this . timer){ this . timer = settimeout(function{ that . s: tru:函數(shù)(e){ var movey = e . changed touches[ 0 ].客戶- 18人；var curindex = parse int(movey/18)；var view = this . data . letter _ list[curindex]；this . setdata({ curvi:視圖}) }，down:函數(shù)(e){ if(this . timer){ clear time out(this . timer)；this.timer = null} var index = e . curr:視圖，curvi:視圖})} : ;a 、curvi: ; }) }如果(！this . timer){ this . timer = settimeout(function{ that . s: tru: bold }。字母{ font-siz: 12px；width: 24px；h: 100%；position:固定；right: 0；top: 0；z-ind: 999；}.審案法官{ width: 24px；h: 18px；lin: 18px；t:中心；}.信息{ font-siz: 12px；t:辯解道；ov:隱藏；}.活性{ background: rgba(0，0，0，0.2)；}.iit: 10 rpx 10 rpx；margin-bottom: 10 rpx；bord: 8rpx；background: rgba(222，222，222，0.2)；box-sizing:邊框；}.溫馨提示{ width: 40px；h: 40px；background: rgba(0，0，0，0.4)；font-siz: 20px；t:中心；line-height cho 1-@ .com 40px；color: # fff；position:固定；l: 50%；top: 50%；margin:-20px；z-ind: 999；bord: 10 rpx；如果您有任何問題，請在本網(wǎng)站的社區(qū)中留言或討論。這個網(wǎng)站還有很多關于小程序的文章。我希望你能找到他們。感謝閱讀。希望能幫到你，感謝你的支持！
標簽:
列出程序位置對應字母
了解更多小程序好友(小程序好友在哪里用 怎么用)相關內(nèi)容請關注本站點。