微信小程序scroll-view錨點(diǎn)鏈接滾動(dòng)跳轉(zhuǎn)功能
更新時(shí)間：2019年12月12日 10:45:10 作者：前端_李嘉豪
這篇文章主要介紹了微信小程序scroll-view錨點(diǎn)鏈接滾動(dòng)跳轉(zhuǎn)功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
html
<view class="list">
<view bindtap='jumpTo' wx:for="{{keys}}" data-item="{{item}}">{{item}}</view>
</view>
<scroll-view scroll-into-view="{{toitem}}" scroll-y="true" scroll-with-animation="true" class="position gochooseAbank">
<view wx:for="{{data}}" id="{{item.key}}"> {{item.name}} </view>
</scroll-view>
js
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: {
toitem:'',
keys:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','P','Q','S','T','U','W','X','Y','Z'],
data: [
{
"id": "166",
"name": "中國(guó)農(nóng)業(yè)銀行",
"abbr": "ABC",
"key": "A",
"hot": "1"
},
{
"id": "167",
"name": "中國(guó)銀行",
"abbr": "BOC",
"key": "B",
"hot": "1"
},
{
"id": "314",
"name": "包商銀行",
"abbr": "BSB",
"key": "B",
"hot": "0"
},
{
"id": "196",
"name": "大連銀行",
"abbr": "DLB",
"key": "D",
"hot": "0"
},
{
"id": "215",
"name": "龍江銀行",
"abbr": "DAQINGB",
"key": "D",
"hot": "0"
},
{
"id": "219",
"name": "東莞農(nóng)村商業(yè)銀行",
"abbr": "DRCBCL",
"key": "D",
"hot": "0"
},
{
"id": "179",
"name": "恒豐銀行",
"abbr": "EGBANK",
"key": "E",
"hot": "0"
},
{
"id": "198",
"name": "福建海峽銀行",
"abbr": "FJHXBC",
"key": "F",
"hot": "0"
},
{
"id": "229",
"name": "桂林銀行",
"abbr": "GLBANK",
"key": "G",
"hot": "0"
},
{
"id": "294",
"name": "廣西省農(nóng)村信用",
"abbr": "GXRCU",
"key": "G",
"hot": "0"
},
{
"id": "174",
"name": "華夏銀行",
"abbr": "HXBANK",
"key": "H",
"hot": "0"
},
{
"id": "189",
"name": "杭州銀行",
"abbr": "HZCB",
"key": "H",
"hot": "0"
},
{
"id": "322",
"name": "湖南省農(nóng)村信用社",
"abbr": "HNRCC",
"key": "H",
"hot": "0"
},
{
"id": "165",
"name": "中國(guó)工商銀行",
"abbr": "ICBC",
"key": "I",
"hot": "1"
},
{
"id": "188",
"name": "江蘇銀行",
"abbr": "JSBANK",
"key": "J",
"hot": "0"
},
{
"id": "203",
"name": "嘉興銀行",
"abbr": "JXBANK",
"key": "J",
"hot": "0"
},
{
"id": "311",
"name": "金華銀行",
"abbr": "JHBANK",
"key": "J",
"hot": "0"
},
{
"id": "248",
"name": "昆侖銀行",
"abbr": "KLB",
"key": "K",
"hot": "0"
},
{
"id": "279",
"name": "庫(kù)爾勒市商業(yè)銀行",
"abbr": "KORLABANK",
"key": "K",
"hot": "0"
},
{
"id": "298",
"name": "昆山農(nóng)村商業(yè)銀行",
"abbr": "KSRB",
"key": "K",
"hot": "0"
},
{
"id": "222",
"name": "遼陽(yáng)市商業(yè)銀行",
"abbr": "LYCB",
"key": "L",
"hot": "0"
},
{
"id": "324",
"name": "洛陽(yáng)銀行",
"abbr": "LYBANK",
"key": "L",
"hot": "0"
},
{
"id": "220",
"name": "浙江民泰商業(yè)銀行",
"abbr": "MTBANK",
"key": "M",
"hot": "0"
},
{
"id": "190",
"name": "南京銀行",
"abbr": "NJCB",
"key": "N",
"hot": "0"
},
{
"id": "191",
"name": "寧波銀行",
"abbr": "NBBANK",
"key": "N",
"hot": "0"
},
{
"id": "249",
"name": "鄂爾多斯銀行",
"abbr": "ORBANK",
"key": "O",
"hot": "0"
},
{
"id": "169",
"name": "中國(guó)郵政儲(chǔ)蓄銀行",
"abbr": "PSBC",
"key": "P",
"hot": "1"
},
{
"id": "201",
"name": "青島銀行",
"abbr": "QDCCB",
"key": "Q",
"hot": "0"
},
{
"id": "281",
"name": "齊魯銀行",
"abbr": "QLBANK",
"key": "Q",
"hot": "0"
},
{
"id": "172",
"name": "上海浦東發(fā)展銀行",
"abbr": "SPDB",
"key": "S",
"hot": "1"
},
{
"id": "182",
"name": "平安銀行",
"abbr": "SPABANK",
"key": "S",
"hot": "0"
},
{
"id": "284",
"name": "盛京銀行",
"abbr": "SJBANK",
"key": "S",
"hot": "0"
},
{
"id": "287",
"name": "深圳農(nóng)村商業(yè)銀行",
"abbr": "SRCB",
"key": "S",
"hot": "0"
},
{
"id": "202",
"name": "臺(tái)州銀行",
"abbr": "TZCB",
"key": "T",
"hot": "0"
},
{
"id": "230",
"name": "烏魯木齊市商業(yè)銀行",
"abbr": "URMQCCB",
"key": "U",
"hot": "0"
},
{
"id": "200",
"name": "溫州銀行",
"abbr": "WZCB",
"key": "W",
"hot": "0"
},
{
"id": "307",
"name": "威海市商業(yè)銀行",
"abbr": "WHCCB",
"key": "W",
"hot": "0"
},
{
"id": "250",
"name": "邢臺(tái)銀行",
"abbr": "XTB",
"key": "X",
"hot": "0"
},
{
"id": "256",
"name": "西安銀行",
"abbr": "XABANK",
"key": "X",
"hot": "0"
},
{
"id": "304",
"name": "許昌銀行",
"abbr": "XCYH",
"key": "X",
"hot": "0"
},
{
"id": "184",
"name": "玉溪市商業(yè)銀行",
"abbr": "YXCCB",
"key": "Y",
"hot": "0"
},
{
"id": "185",
"name": "堯都農(nóng)商行",
"abbr": "YDRCB",
"key": "Y",
"hot": "0"
},
{
"id": "297",
"name": "宜賓市商業(yè)銀行",
"abbr": "YBCCB",
"key": "Y",
"hot": "0"
},
{
"id": "211",
"name": "齊商銀行",
"abbr": "ZBCB",
"key": "Z",
"hot": "0"
},
{
"id": "213",
"name": "遵義市商業(yè)銀行",
"abbr": "ZYCBANK",
"key": "Z",
"hot": "0"
},
{
"id": "286",
"name": "鄭州銀行",
"abbr": "ZZBANK",
"key": "Z",
"hot": "0"
},
{
"id": "303",
"name": "張家口市商業(yè)銀行",
"abbr": "ZJKCCB",
"key": "Z",
"hot": "0"
}
]
},
jumpTo: function (e) {
console.log(e)
let option = e.currentTarget.dataset.item;
this.setData({
toitem: option
})
} ,
})
css
/* 必須要給的100%不然無(wú)法實(shí)現(xiàn)滾動(dòng)跳轉(zhuǎn)效果 */
page{
height: 100%;
}
/* 必須要給的100%不然無(wú)法實(shí)現(xiàn)滾動(dòng)跳轉(zhuǎn)效果 */
.position{
position: relative;
height: 100%;
}
.list{
position: fixed;
z-index: 9;
top:175rpx;
right: 7rpx;
font-size: 28rpx;
color: #6ea7f7;
line-height: 20px;
text-align: center;
}
.gochooseAbank view{
height: 100rpx;
line-height: 100rpx;
border-bottom: 1rpx solid #e8e8e8
}
.keys{
font-size: 28rpx;
color: #6ea7f7;
}
總結(jié)
以上所述是小編給大家介紹的微信小程序scroll-view錨點(diǎn)鏈接滾動(dòng)跳轉(zhuǎn)功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
您可能感興趣的文章:
- 微信小程序?qū)崿F(xiàn)錨點(diǎn)定位功能的方法實(shí)例
- 微信小程序?qū)崿F(xiàn)錨點(diǎn)跳轉(zhuǎn)
- 微信小程序scroll-view實(shí)現(xiàn)滾動(dòng)到錨點(diǎn)左側(cè)導(dǎo)航欄點(diǎn)餐功能(點(diǎn)擊種類,滾動(dòng)到錨點(diǎn))
- 微信小程序 scroll-view 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)功能
- 微信小程序?qū)崿F(xiàn)錨點(diǎn)功能
- 小程序?qū)崿F(xiàn)錨點(diǎn)滑動(dòng)效果
- 微信小程序 scroll-view實(shí)現(xiàn)錨點(diǎn)滑動(dòng)的示例
- 微信小程序?qū)崿F(xiàn)錨點(diǎn)定位樓層跳躍的實(shí)例
- 微信小程序商城分類滾動(dòng)列表錨點(diǎn)的項(xiàng)目實(shí)踐
相關(guān)文章
JS實(shí)現(xiàn)兼容各種瀏覽器的獲取選擇文本的方法【測(cè)試可用】
這篇文章主要介紹了JS實(shí)現(xiàn)兼容各種瀏覽器的獲取選擇文本的方法,可實(shí)現(xiàn)鼠標(biāo)拖動(dòng)選擇文本的同時(shí),下方顯示區(qū)同步實(shí)時(shí)顯示選中內(nèi)容的功能,涉及javascript響應(yīng)鼠標(biāo)事件及頁(yè)面元素動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-06-06
本文主要介紹了JS數(shù)組去重的4種方法。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
layui問題之模擬select點(diǎn)擊事件的實(shí)例講解
今天小編就為大家分享一篇layui問題之模擬select點(diǎn)擊事件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JavaScript面向?qū)ο缶幊绦∮螒?--貪吃蛇代碼實(shí)例
這篇文章主要介紹了JavaScript貪吃蛇的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
classList 是一個(gè)非常實(shí)用的工具,可以讓我們輕松地操作元素的類名,在使用 classList 時(shí),我們可以通過(guò) add、remove、toggle 和 contains 等方法來(lái)添加、刪除、切換和檢查類名,接下來(lái)我們?cè)敿?xì)學(xué)習(xí)一下classList的使用方法以及相關(guān)方法,感興趣的朋友一起看看吧2023-10-10
Bootstrap 是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。本文重點(diǎn)給大家介紹Bootstrap零基礎(chǔ)入門教程(三) ，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-07-07
Bootstrap 過(guò)渡效果Transition 模態(tài)框（Modal）
這篇文章主要介紹了Bootstrap 過(guò)渡效果Transition 模態(tài)框（Modal）,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03![Javascript的console['''']常用輸入方法匯總](http://img.jbzj.com/images/xgimg/bcimg7.png)
Javascript的console['''']常用輸入方法匯總
本文給大家?guī)?lái)了十幾種Javascript的console['']常用輸入方法，每種方法給大家介紹的都很詳細(xì)，需要的朋友參考下吧2018-04-04
JS實(shí)現(xiàn)含有中文字符串的友好截取功能分析
這篇文章主要介紹了JS實(shí)現(xiàn)含有中文字符串的友好截取功能,結(jié)合實(shí)例形式分析了JS針對(duì)含有中文的字符串截取操作相關(guān)原理與實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
JavaScript中通過(guò)提示框跳轉(zhuǎn)頁(yè)面的方法
這篇文章主要介紹了JavaScript中通過(guò)提示框跳轉(zhuǎn)頁(yè)面的方法的相關(guān)資料,需要的朋友可以參考下2016-02-02