国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

兩行代碼實現微信小程序聯系人sidebar

RayKr / 3529人閱讀

摘要:七后記過程最近微信小程序很火爆,我也嘗試著做個天氣軟件試試手,在做到城市列表的時難倒我了首先了解的屬性,把一個值賦給這個屬性,那么對應值的組件就會置頂在的頂部,舉例如果贛州這個的是,那你把的值設置成,那一打開贛州就會出現在頂部。

作者:Z帥來襲
來自:授權地址
轉自:微信小程序聯盟?

話不多說,先給你們看看核心數據和結構:

一、數據:

city的json array,letter的array

(city的json array里的首字母是我手工放置進去的,你也可以通過for循環獲得city_en的第一個字符來自動添加,但是為了贏得了性能我舍棄了靈活性)

二、布局

左邊是scollview,右邊是sidebar,這個布局要是布不好,可以先去了解下“flex布局”

三、sidebar布局

讓sidebar-item的id為當前字母

四、設置sidebar距離頂部50px,設置sidebar的Item為固定20px,這個是必須的
.sideBar {
  width: 5%;
  margin-top: 50px;
}

.sideBar-item {
  height: 20px;
}
五、在sidebar上添加事件bindtouchmove

這個事件可以獲取當前手指觸摸的位置(主要是獲得距離屏幕頂部的pageY),下面是思路

var pageY = 在touchmove事件e中獲得pageY 

var letterIndex = (pageY - sidebar距離頂部的50px)/sidebar item的高度20px

var letter = charArray[letterIndex];

實際代碼:

   let letterIndex = (e.changedTouches["0"].pageY- 50) / 20;
   let letter = this.data.letterArray[letterIndex - 1];

  在此,已經獲得了你手指觸摸的letter了

六、通過scroll-view的一個屬性來讓字母置頂在scroll-view:scroll-to-view,可以把他的值設置為一個id

scrollview的ABCD等索引的ID實際上就是ABCD本身,那么,把第四段落獲得的letter通過this.setData({toview:letter});

至此,觸摸sidebar就可以看到列表通過觸摸在變化。

七、后記過程:

最近微信小程序很火爆,我也嘗試著做個天氣軟件試試手,在做到城市列表的sidebar時難倒我了

首先了解scrollview的scroll-to-view屬性,把一個ID值賦給這個屬性,那么對應ID值的組件就會置頂在scrollview的頂部,舉例:

如果“贛州”這個item的id是ganzhou,那你把scroll-to-view的值設置成ganzhou,那scrollview一打開贛州就會出現在頂部。

接著,研究微信小程序的“事件”,微信小程序的事件有以下這些

在一個個嘗試后,發現touchmove是最適合自己的,我原本想的是,

既然touchmove事件會返回touch位置的組件信息,那么我就可以根據組件獲得ID值,把ID的值再賦給scoll-to-view,

但是實際上不是我想的這樣,他不斷返回的都是我手指最開始觸摸位置的組件。

最后,我就琢磨讓sidebar和sidebar item的位置固定,通過計算獲得letter的位置。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/66515.html

相關文章

  • 兩行代碼實現信小程序系人sidebar

    摘要:七后記過程最近微信小程序很火爆,我也嘗試著做個天氣軟件試試手,在做到城市列表的時難倒我了首先了解的屬性,把一個值賦給這個屬性,那么對應值的組件就會置頂在的頂部,舉例如果贛州這個的是,那你把的值設置成,那一打開贛州就會出現在頂部。 作者:Z帥來襲來自:授權地址轉自:微信小程序聯盟? 話不多說,先給你們看看核心數據和結構: 一、數據: city的json array,letter的arra...

    cnTomato 評論0 收藏0
  • 信小程序require 引用 BASE64.JS 失敗問題的分析解決

    摘要:問題有朋友問微信小程序文件時,會失敗分析事實上,微信小程序很多模塊都有不兼容現象。。。,被微信小程序初始化時,指針為空,處理避開這類訪問。 問題 有朋友問, 微信小程序require (base64.js)文件時,會失敗,,, 分析 事實上,微信小程序require很多JS模塊都有不兼容現象。。。先從base64.js這個模塊入手吧。調試出錯點: (function(global) ...

    airborne007 評論0 收藏0
  • 信小程序】采坑之scroll-view組件

    摘要:使用中文類的組件時候也就是需要呈現中文的組件,不限于組件是會自動換行的,這時候需求在中強制不換行。在使用非中文組件時候就一切正常。至于為啥使用中文組件會有一部分留白,這個我不知道是個例還是,反正只需要用相對定位移一下就可以了。? 一、摘要   今天在使用scroll-view組件的時候發現結果跟預想的不一樣。其實也不是第一次用了,同樣的寫法卻出現了意料之外的效果,所以認定是bug了。博主使用...

    張憲坤 評論0 收藏0

發表評論

0條評論

RayKr

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<