uniapp：索引列表

薇眠winter

已于 2022-11-08 15:19:17 修改

阅读量3k

点赞数 4

分类专栏： uniapp 文章标签： uni-app javascript 前端

于 2022-09-20 10:46:23 首次发布

本文链接：https://blog.csdn.net/weixin_58725427/article/details/126948434

版权

uniapp：索引列表

一、简单：uniapp：索引列表

解释：

1.效果：通过点击右侧字母索引导航栏，滚动到对应区域。

2.实现思路：使用uni-app原生scroll-view组件的scroll-into-view实现。
uniapp官网：
https://uniapp.dcloud.net.cn/component/scroll-view.html#scroll-view

3.scroll-into-view需要使用到id进行跳转，设置id。

4.设置滚动条，右侧索引。

5.scroll-y：允许纵向滚动；
scroll-into-view：用于给滚动事件添加动画效果；
toView：是自定义的跳转id，通过点击右侧的导航栏，将toView设置为所点击id，就可以直接跳转至所点击位置的id。

注意：scroll-view 要添加一个固定的高度如：height: 100vh。

1.代码：

<template>
	<view>
		  <view class="address-book-container">
		    <!-- 左侧通讯录 -->
		    <scroll-view class="scroll-container" scroll-y="true" :scroll-into-view="toView" scroll-with-animation="true">
		      <view class="address-book" v-for="(item, index) in addressBook" :key="index" :id="item.id">
		        <view class="address-book-index">{
  { item.id }}</view>
		        <view class="contact-container" v-for="(item, index) in item.data" :key="index">
		          <img class="contact-img" src="http://www.lixia.gov.cn/picture/0/s_97b76c734a6f40f8abba95615cbff1e1.jpg" alt="" />
		          <view class="contact-detail-container">
		            <view class="contact-name">{
  { item.zh_title }}</view>
		            <view class="contact-address">{
  { item.address }}</view>
		           <!-- <view class="contact-phone">{
   { item.phone }}</view> -->
		          </view>
		        </view>
		      </view>
		    </scroll-view>
		 
		    <!-- 右侧字母导航条 -->
		    <view class="letter-nav">
		      <view class="item" v-for="(item, index) in indexList" :key="index" @click="toSelectIndex(item)">{
  { item }}</view>
		    </view>
		  </view>
	</view>
</template>

<script>
	export default {
     
		data(){
     
		return {
     
		    indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O',     'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
		    toView: '',
			addressBook:[
			
				{
     
					id:'A',
					data:[
						{
     zh_title:'阿联酋迪拉姆',en_title:'aa',address:'AED',phone:'111111'},
						{
     zh_title:'阿尔巴尼亚列克',en_title:'aaaaa',address:'ALL',phone:'222222'},
						]
				},
				{
     
					id:'B',
					data:[
						{
     zh_title:'孟加拉国塔卡',en_title:'bbb',address:'BDT',phone:'111111'},
						{
     zh_title:'保加利亚列瓦',en_title:'bbb',address:'BGN',phone:'222222'},
						]
				},
				{
     
					id:'C',
					data:[
						{
     zh_title:'加拿大元',en_title:'ccc',address:'CAD',phone:'111111'},
						{
     zh_title:'瑞士法郎',en_title:'ccc',address:'CHF',phone:'222222'},
						]
				},
				{
     
					id:'D'