微信小程序scroll-view錨點鏈接滾動跳轉功能

創(chuàng)新互聯公司專注于雞澤網站建設服務及定制，我們擁有豐富的企業(yè)做網站經驗。熱誠為您提供雞澤營銷型網站建設，雞澤網站制作、雞澤網頁設計、雞澤網站官網定制、小程序開發(fā)服務，打造雞澤網絡公司原創(chuàng)品牌,更為您提供雞澤網站排名全網營銷落地服務。

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>

//index.js
//獲取應用實例
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": "中國農業(yè)銀行",
   "abbr": "ABC",
   "key": "A",
   "hot": "1"
  },
  
  {
   "id": "167",
   "name": "中國銀行",
   "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": "東莞農村商業(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": "廣西省農村信用",
   "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": "湖南省農村信用社",
   "abbr": "HNRCC",
   "key": "H",
   "hot": "0"
  },
  {
   "id": "165",
   "name": "中國工商銀行",
   "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": "庫爾勒市商業(yè)銀行",
   "abbr": "KORLABANK",
   "key": "K",
   "hot": "0"
  },
  {
   "id": "298",
   "name": "昆山農村商業(yè)銀行",
   "abbr": "KSRB",
   "key": "K",
   "hot": "0"
  },
  {
   "id": "222",
   "name": "遼陽市商業(yè)銀行",
   "abbr": "LYCB",
   "key": "L",
   "hot": "0"
  },
  {
   "id": "324",
   "name": "洛陽銀行",
   "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": "中國郵政儲蓄銀行",
   "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": "深圳農村商業(yè)銀行",
   "abbr": "SRCB",
   "key": "S",
   "hot": "0"
  },
  
  {
   "id": "202",
   "name": "臺州銀行",
   "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": "邢臺銀行",
   "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": "堯都農商行",
   "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%不然無法實現滾動跳轉效果 */
page{
 height: 100%; 
}
/* 必須要給的100%不然無法實現滾動跳轉效果 */
.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;

}

總結

以上所述是小編給大家介紹的微信小程序scroll-view錨點鏈接滾動跳轉功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

分享題目：微信小程序scroll-view錨點鏈接滾動跳轉功能
網站鏈接：http://jinyejixie.com/article37/jjgssj.html

成都網站建設公司_創(chuàng)新互聯，為您提供虛擬主機、網站收錄、網站策劃、網站建設、網站改版、動態(tài)網站

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

微信小程序scroll-view錨點鏈接滾動跳轉功能