需求：搜索框固定在頂部，點(diǎn)擊右側(cè)的索引欄時(shí)，跳轉(zhuǎn)到相應(yīng)的錨點(diǎn)
問(wèn)題：跳轉(zhuǎn)到的位置默認(rèn)在最頂層，被搜索框擋住
問(wèn)題解決方法如下
先看效果圖
剛進(jìn)去

點(diǎn)擊右側(cè)

代碼

<div class="citySearch"><van-searchv-model="value"shape="round"background="#F2F2F2"placeholder="搜索"/></div><div class="hotC"><h3>熱門(mén)城市</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; //定義錨點(diǎn)位置margin-top: -100px;}/deep/ .van-index-bar__index {font-size: 14px;line-height: 15px;} }

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。