uniapp:索引列表

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'
  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值