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.展示：

uniapp：索引列表相关推荐

uni-app 写小程序索引列表，仿微信通讯录
心里认定了一个女孩就要好好的珍惜对待她,人生不容辜负,你必须要更加努力 .加油骚年 uni-app 写小程序索引列表,仿微信通讯录去uni-app官网下载插件 indexlist <m ...
uni-app - 城市选择索引列表 / 通过 A-Z 排序的城市列表（uview 组件库 IndexList 索引列表）
前言由于考虑到各端平台兼容性及其代码健壮性(无BUG),故采用 uview 组件库的 IndexList 索引列表组件作为 "底层" 支持,在此基础上二次封装,可靠性及稳定性毋 ...
关于uniapp u-index-list索引列表组件v-show的一些问题
u-index-list索引列表组件v-show问题,u-index-anchor锚点会默认出现最后一组数据的索引一开始找不到什么原因就使用css强制让锚点先隐藏锚点默认给右边索引的第一位scroll ...
pandas使用np.where函数计算返回dataframe中指定数据列包含缺失值的行索引列表list
pandas使用np.where函数计算返回dataframe中指定数据列包含缺失值的行索引列表list(index of rows with missing values in dataframe ...
pandas使用drop函数删除dataframe中指定索引列表对应位置的数据行（drop multiple rows in dataframe with integer index）
pandas使用drop函数删除dataframe中指定索引列表对应位置的数据行(drop multiple rows in dataframe with integer index) 目录
pandas使用query函数基于判断条件获得dataframe中满足条件的数据行(row)的索引列表（index of rows matching conditions in dataframe）
pandas使用query函数基于判断条件获得dataframe中满足条件的数据行(row)的索引列表(index of rows matching conditions in dataframe) ...
pandas使用dropna函数计算返回dataframe中不包含缺失值的行索引列表list（index of rows without missing values in dataframe）
pandas使用dropna函数计算返回dataframe中不包含缺失值的行索引列表list(index of rows without missing values in dataframe) 目录
Apicloud——关于索引列表
2019-03-08 11:37:04 ApiCloud+mui完成索引列表例子主用mui的索引列表,把他的静态数据换成了动态请求数据效果: 有几个问题,整理一下: 1.请求来的数据无排序,先 ...
仿微信联系人索引列表ListView
IM 模块中经常用到字母索引 ListView 来做通讯录或者称联系人列表, 今天跟大家分享一个仿微信联系人索引列表, 优点是轻量级,简单易懂. 不要任何依赖 , jar包等效果预览工程结构 ...

uniapp：索引列表

uniapp：索引列表

一、简单：uniapp：索引列表

解释：

1.代码：

2.展示：

二、加内容：各国货币，币种，索引列表

1.代码：

2.展示：

uniapp：索引列表相关推荐

最新文章

热门文章