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',
data:[
{zh_title:'丹麦克朗',en_title:'ddd',address:'DKK',phone:'111111'},
{zh_title:'多米尼加比索',en_title:'ddd',address:'DOP',phone:'222222'},
{zh_title:'丹麦克朗',en_title:'ddd',address:'DKK',phone:'111111'},
{zh_title:'多米尼加比索',en_title:'ddd',address:'DOP',phone:'222222'},
{zh_title:'丹麦克朗',en_title:'ddd',address:'DKK',phone:'111111'},
{zh_title:'多米尼加比索',en_title:'ddd',address:'DOP',phone:'222222'},
]
},
{
id:'Z',
data:[
{zh_title:'z',en_title:'zz',address:'zzz',phone:'111111'},
{zh_title:'zzz',en_title:'ddd',address:'ddd',phone:'222222'},
]
}
]
}
},
methods: {
toSelectIndex(item){
this.toView = item
}
}
}
</script>
<style>
.contact-img{
width: 20px;
height: 20px;
}
.scroll-container{
height: 100vh;
}
.letter-nav{
position: fixed;
right: 25px;
top: 90px;
}
.contact-container{
display: flex;
align-items: center;
margin: 2%;
}
.contact-detail-container{
margin-left: 2%;
}
</style>
2.展示：
二、加内容：各国货币，币种，索引列表
1.代码：
<template>
<view>
<view class="v-nav2">
<view class="v-nav2-1" @click="back">
<image src="../../static/icon/back.png" class="img-sm"></image>
币种
</view>
<view>
<image src="../../static/icon/search.png" class="img-sm" @click="goToPage('/pages/search/search_currency')"></image>
</view>
</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="../../static/icon/zhongguojie.png" 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',
data:[
{zh_title:'丹麦克朗',en_title:'ddd',address:'DKK',phone:'111111'},
{zh_title:'多米尼加比索',en_title:'ddd',address:'DOP',phone:'222222'},
]
},
{
id:'E',
data:[
{zh_title:'埃及镑',en_title:'ddd',address:'EGP',phone:'111111'},
{zh_title:'埃塞俄比亚比尔',en_title:'ddd',address:'ETB',phone:'222222'},
]
},
{
id:'F',
data:[
{zh_title:'斐济元',en_title:'ddd',address:'FJD',phone:'111111'},
]
},
{
id:'G',
data:[
{zh_title:'英镑',en_title:'ddd',address:'GBP',phone:'111111'},
{zh_title:'格鲁吉亚拉里',en_title:'ddd',address:'GEL',phone:'222222'},
]
},
{
id:'H',
data:[
{zh_title:'港币',en_title:'ddd',address:'HKD',phone:'111111'},
{zh_title:'洪都拉斯伦皮拉',en_title:'ddd',address:'HNL',phone:'222222'},
]
},
{
id:'I',
data:[
{zh_title:'印度尼西亚盾',en_title:'ddd',address:'IDR',phone:'111111'},
{zh_title:'以色列谢克尔',en_title:'ddd',address:'ILS',phone:'222222'},
]
},
{
id:'J',
data:[
{zh_title:'牙买加元',en_title:'ddd',address:'JMD',phone:'111111'},
{zh_title:'约旦第纳尔',en_title:'ddd',address:'JOD',phone:'222222'},
]
},
{
id:'K',
data:[
{zh_title:'肯尼亚先令',en_title:'ddd',address:'KES',phone:'111111'},
{zh_title:'吉尔吉斯索姆',en_title:'ddd',address:'KGS',phone:'222222'},
]
},
{
id:'L',
data:[
{zh_title:'老挝基普',en_title:'ddd',address:'LAK',phone:'111111'},
{zh_title:'黎巴嫩榜',en_title:'ddd',address:'LBP',phone:'222222'},
]
},
{
id:'M',
data:[
{zh_title:'摩洛哥迪拉姆',en_title:'ddd',address:'MAD',phone:'111111'},
{zh_title:'摩尔多瓦列伊',en_title:'ddd',address:'MDL',phone:'222222'},
]
},
{
id:'N',
data:[
{zh_title:'纳米比亚元',en_title:'ddd',address:'NAD',phone:'111111'},
{zh_title:'尼日利亚第纳尔',en_title:'ddd',address:'NGN',phone:'222222'},
]
},
{
id:'O',
data:[
{zh_title:'阿曼里亚尔',en_title:'ddd',address:'OMR',phone:'111111'},
]
},
{
id:'P',
data:[
{zh_title:'秘鲁新索尔',en_title:'ddd',address:'PEN',phone:'111111'},
{zh_title:'新几内亚基那基那',en_title:'ddd',address:'PGK',phone:'222222'},
]
},
{
id:'Q',
data:[
{zh_title:'卡塔尔里亚尔',en_title:'ddd',address:'QAR',phone:'111111'},
]
},
{
id:'R',
data:[
{zh_title:'罗马尼亚列伊',en_title:'ddd',address:'RON',phone:'111111'},
{zh_title:'塞尔维亚第纳尔',en_title:'ddd',address:'RSD',phone:'222222'},
]
},
{
id:'S',
data:[
{zh_title:'沙特阿拉伯里亚尔',en_title:'ddd',address:'SAR',phone:'111111'},
{zh_title:'塞舌尔卢比',en_title:'ddd',address:'SCR',phone:'222222'},
]
},
{
id:'T',
data:[
{zh_title:'泰铢',en_title:'ddd',address:'THB',phone:'111111'},
]
},
{
id:'U',
data:[
{zh_title:'乌克兰格里夫纳',en_title:'ddd',address:'UAH',phone:'111111'},
]
},
{
id:'V',
data:[
{zh_title:'委内瑞拉玻利瓦尔',en_title:'ddd',address:'VEF',phone:'111111'},
]
},
{
id:'W',
data:[
{zh_title:'',en_title:'',address:'',phone:''},
]
},
{
id:'X',
data:[
{zh_title:'中非法郎',en_title:'ddd',address:'XAF',phone:'111111'},
]
},
{
id:'Y',
data:[
{zh_title:'也门里亚尔',en_title:'ddd',address:'YER',phone:'111111'},
]
},
{
id:'Z',
data:[
{zh_title:'南非兰特',en_title:'zz',address:'ZAR',phone:'111111'},
]
}
]
}
},
methods: {
//
back() {
uni.navigateBack({
delta: 1
});
},
goToPage(url) {
console.log(url);
if (!url) return;
uni.navigateTo({
url
});
},
//
toSelectIndex(item){
this.toView = item
}
},
}
</script>
<style>
.img-sm{
width: 20px;
height: 20px;
}
.v-nav2{
display: flex;
justify-content: space-between;
padding: 5%;
background-color: #d4e4ff;
position: fixed;
width: 90%;
top: 0;
z-index: 1;
}
.v-nav2-1{
display: flex;
}
.address-book-container{
margin-top: 18%;
margin-left: 2%;
}
.contact-img{
width: 20px;
height: 20px;
}
.scroll-container{
height: 100vh;
}
.letter-nav{
position: fixed;
right: 25px;
top: 90px;
text-align: center;
}
.contact-container{
display: flex;
align-items: center;
margin: 2%;
}
.contact-detail-container{
margin-left: 2%;
}
</style>
2.展示：
版权声明：本文为weixin_58725427原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。