需求：搜索框固定在頂部，點擊右側的索引欄時，跳轉到相應的錨點
問題：跳轉到的位置默認在最頂層，被搜索框擋住
問題解決方法如下
先看效果圖
剛進去

點擊右側

代碼

<div class="citySearch"><van-searchv-model="value"shape="round"background="#F2F2F2"placeholder="搜索"/></div><div class="hotC"><h3>熱門城市</h3><ul><li v-for="(item, index) in hotCitys" :key="index"><span>{{ item }}</span></li></ul></div><div class="selectCity"><van-index-bar class="indexBar" :sticky="false" :index-list="indexList"><van-index-anchorv-for="(item, index) in cityDts":key="index":index="item.initial"><span class="indexWord">{{ item.initial }}</span><van-cell@click="chooseCity(citem)"v-for="(citem, cindex) in item.list":key="cindex":title="citem.name"/></van-index-anchor></van-index-bar></div> .citySearch {position: fixed;top: 44px;width: 100%;/deep/ .van-search__content {padding-left: 0;}/deep/ .van-search .van-cell {background-color: white;border-radius: 20px;.van-field__left-icon {margin: 0 5px;}} } .selectCity {position: absolute;z-index: -1;top: 160px;/deep/ .van-index-anchor{padding-top: 100px; //定義錨點位置margin-top: -100px;}/deep/ .van-index-bar__index {font-size: 14px;line-height: 15px;} }

總結

以上是生活随笔為你收集整理的vant indexbar 做城市列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。