ThinkSSL🔒 一键申购 5分钟快速签发 30天无理由退款 购买更放心 广告
![](https://img.kancloud.cn/f4/c5/f4c5b5a1b0668d6afe14a3fd6eb5a51d_638x937.png) ``` <template> <view> <cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg" :isBack="true"><block slot="backText">返回</block> <block slot="content">索引</block> </cu-custom> <view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]"> <view class="search-form round"> <text class="cuIcon-search"></text> <input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input> </view> <view class="action"> <button class="cu-btn bg-gradual-green shadow-blur round">搜索</button> </view> </view> <scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]" :scroll-with-animation="true" :enable-back-to-top="true"> <block v-for="(item,index) in list" :key="index"> <view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name"> <view class="padding">{{item.name}}</view> <view class="cu-list menu-avatar no-padding"> <view class="cu-item" v-for="(items,sub) in 2" :key="sub"> <view class="cu-avatar round lg">{{item.name}}</view> <view class="content"> <view class="text-grey">{{item.name}}<text class="text-abc">{{list[sub].name}}</text>君</view> <view class="text-gray text-sm"> 有{{sub+2}}个主子需要伺候 </view> </view> </view> </view> </view> </block> </scroll-view> <view class="indexBar" :style="[{height:'calc(100vh - ' + CustomBar + 'px - 50px)'}]"> <view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove"> <view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur"> {{item.name}}</view> </view> </view> <!--选择显示--> <view v-show="!hidden" class="indexToast"> {{listCur}} </view> </view> </template> <script> export default { data() { return { StatusBar: this.StatusBar, CustomBar: this.CustomBar, hidden: true, listCurID: '', list: [], listCur: '', }; }, onLoad() { let list = [{}]; for (let i = 0; i < 26; i++) { list[i] = {}; list[i].name = String.fromCharCode(65 + i); } this.list = list; this.listCur = list[0]; }, onReady() { let that = this; uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) { that.boxTop = res.top }).exec(); uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) { that.barTop = res.top }).exec() }, methods: { //获取文字信息 getCur(e) { this.hidden = false; this.listCur = this.list[e.target.id].name; }, setCur(e) { this.hidden = true; this.listCur = this.listCur }, //滑动选择Item tMove(e) { let y = e.touches[0].clientY, offsettop = this.boxTop, that = this; //判断选择区域,只有在选择区才会生效 if (y > offsettop) { let num = parseInt((y - offsettop) / 20); this.listCur = that.list[num].name }; }, //触发全部开始选择 tStart() { this.hidden = false }, //触发结束选择 tEnd() { this.hidden = true; this.listCurID = this.listCur }, indexSelect(e) { let that = this; let barHeight = this.barHeight; let list = this.list; let scrollY = Math.ceil(list.length * e.detail.y / barHeight); for (let i = 0; i < list.length; i++) { if (scrollY < i + 1) { that.listCur = list[i].name; that.movableY = i * 20 return false } } } } } </script> <style> page { padding-top: 100upx; } .indexes { position: relative; } .indexBar { position: fixed; right: 0px; bottom: 0px; padding: 20upx 20upx 20upx 60upx; display: flex; align-items: center; } .indexBar .indexBar-box { width: 40upx; height: auto; background: #fff; display: flex; flex-direction: column; box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1); border-radius: 10upx; } .indexBar-item { flex: 1; width: 40upx; height: 40upx; display: flex; align-items: center; justify-content: center; font-size: 24upx; color: #888; } movable-view.indexBar-item { width: 40upx; height: 40upx; z-index: 9; position: relative; } movable-view.indexBar-item::before { content: ""; display: block; position: absolute; left: 0; top: 10upx; height: 20upx; width: 4upx; background-color: #f37b1d; } .indexToast { position: fixed; top: 0; right: 80upx; bottom: 0; background: rgba(0, 0, 0, 0.5); width: 100upx; height: 100upx; border-radius: 10upx; margin: auto; color: #fff; line-height: 100upx; text-align: center; font-size: 48upx; } </style> ```