mintui的indexList实现通讯录，随便写了点数据凑合着用一下，直接上代码简单粗暴

最新推荐文章于 2023-09-26 09:51:40 发布
置顶 最新推荐文章于 2023-09-26 09:51:40 发布
阅读量661 收藏 1
点赞数
分类专栏： mintui 文章标签： 使用mintui实现通讯录功能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjs_xxq/article/details/89455119
版权

 

<template>

<div>

<!-- 模糊查询功能暂未实现 -->

<div class="page-serch">

<mt-search v-model="value" :result="filterSerch" placeholder="输入船舶名"></mt-search>

</div>

<div>

<mt-index-list>

<mt-index-section v-for="(item,index) in ashipList" :key="index" :index="item.title">

<mt-cell v-for="(value,key) in item.ashipMsg" :key="key">

<p></p>

<!-- <p><img :src="value.imgUrl" alt></p> -->

<p>{{value.name}}</p>

<p>

MMSI:

<span>{{value.mmsi}}</span>

</p>

<p>

载重:

<span>{{value.loder}}</span>

</p>

</mt-cell>

</mt-index-section>

</mt-index-list>

</div>

</div>

</template>

 

<script>

export default {

name: "page-serch",

data() {

return {

value: "",

result:[],

ashipList: [

{

title: "A",

ashipMsg: [

{

imgUrl: "/static/img/mao.jpg",

name: "啊屏风",

mmsi: "393282711",

loder: "74228.67"

},

{

imgUrl: "/static/img/mao.jpg",

name: "啊屏风",

mmsi: "393282711",

loder: "74228.67"

},

{

imgUrl: "/static/img/mao.jpg",

name: "啊屏风",

mmsi: "393282711",

loder: "74228.67"

}

]

},

{

title: "B",

ashipMsg: [

{

imgUrl: "/static/img/mao.jpg",

name: "吧屏风",

mmsi: "393282711",

loder: "74228.67"

},

{

imgUrl: "/static/img/mao.jpg",

name: "吧屏风",

mmsi: "393282711",

loder: "74228.67"

},

{

imgUrl: "/static/img/mao.jpg",

name: "吧屏风",

mmsi: "393282711",

loder: "74228.67"

}

]

},

{

title: "C",

ashipMsg: [

{

imgUrl: "/static/img/mao.jpg",

name: "从屏风",

mmsi: "393282711",

loder: "74228.67"

},

{

imgUrl: "/static/img/mao.jpg",

name: "从屏风",

mmsi: "393282711",

loder: "74228.67"

},

{

imgUrl: "/static/img/mao.jpg",

name: "从屏风",

mmsi: "393282711",

loder: "74228.67"

}

]

},

{

title: "D",

ashipMsg: [

{

imgUrl: "/static/img/mao.jpg",

name: "的屏风",

mmsi: "393282711",

loder: "74228.67"

},

{

imgUrl: "/static/img/mao.jpg",

name: "的屏风",

mmsi: "393282711",

loder: "74228.67"

},

{

imgUrl: "/static/img/mao.jpg",

name: "的屏风",

mmsi: "393282711",

loder: "74228.67"

}

]

},

{

title: "E",

ashipMsg: [

{

imgUrl: "/static/img/mao.jpg",

name: "额屏风",

mmsi: "393282711",

loder: "74228.67"

},

{

imgUrl: "/static/img/mao.jpg",

name: "额 屏风",

mmsi: "393282711",

loder: "74228.67"

},

{

imgUrl: "/static/img/mao.jpg",

name: "额屏风",

mmsi: "393282711",

loder: "74228.67"

}

]

},

{

title: "F",

ashipMsg: [

{

imgUrl: "/static/img/mao.jpg",

name: "发屏风",

mmsi: "393282711",

loder: "74228.67"

},

{

imgUrl: "/static/img/mao.jpg",

name: "发屏风",

mmsi: "393282711",

loder: "74228.67"

},

{

imgUrl: "/static/img/mao.jpg",

name: "发屏风",

mmsi: "393282711",

loder: "74228.67"

}

]

},

{

title: "G",

ashipMsg: [

{

imgUrl: "/static/img/mao.jpg",

name: "给屏风",

mmsi: "393282711",

loder: "74228.67"

},

{

imgUrl: "/static/img/mao.jpg",

name: "给屏风",

mmsi: "393282711",

loder: "74228.67"

},

{

imgUrl: "/static/img/mao.jpg",

name: "给屏风",

mmsi: "393282711",

loder: "74228.67"

}

]

}

]

};

},

computed: {

//模糊查询方法

filterSerch() {

for(let k in this.ashipList){

//console.log(this.ashipList[k])

return this.result.filter(value=>new RegExp(this.value,'i').test(value))

}

 

// return

// this.ashipList.ashipMsg.filter(value =>

// new RegExp(this.value, "i").test(value)

// );

}

}

};

</script>

 

<style>

.mint-search {

height: 1rem;

}

.mint-searchbar {

background: white;

}

.mint-searchbar-inner {

border: solid 1px #fde6c9;

border-radius: 1rem;

padding: 0;

height: 0.48rem;

align-items: center;

}

.mint-searchbar-core {

width: 80%;

padding: 0 0 0 0.2rem;

font-size: 0.24rem;

}

.mintui-search {

margin-left: 0.2rem;

margin-top: 0.1rem;

}

.mint-cell-title {

flex: 0;

}

.mint-cell-value {

width: 100%;

font-size: 0.26rem;

}

.mint-cell-value p {

text-align: center;

}

.mint-cell-value p:first-of-type {

width: 10%;

}

.mint-cell-value p:first-of-type img {

width: 70%;

}

.mint-cell-value p:nth-of-type(2) {

color: black;

font-size: 0.28rem;

font-weight: 550;

}

.mint-cell-value p:nth-of-type(3),

.mint-cell-value p:nth-of-type(4) {

margin-left: 0.36rem;

}

.mint-cell-value p:nth-of-type(3) span,

.mint-cell-value p:nth-of-type(4) span {

display: inline-block;

margin-left: 0.1rem;

}

.mint-indexlist-nav {

border-left: none;

color: #0962b4;

background: rgba(253, 253, 255, 0.1);

}

.mint-indexlist-content {

margin-right: 0px !important;

}

.mint-indexsection-index {

background: #eff4fb;

padding: 0.04rem 0.4rem;

}

.mint-indexlist-navlist {

height: 100%;

justify-content: flex-start;

padding: 0.4rem 0;

}

</style>

 

hjs_xxq
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
使用Mint UI 的Index List 制作通讯录功能
勋勋勋勋小勋勋的博客
01-12 1288
效果图 .vue &amp;lt;mt-index-list&amp;gt; &amp;lt;mt-index-section v-for="(lettersort, index) in lettersSort" // 主要代码 :key="index" :index="lettersort.Lette...
Mint ui 联系人列表（index list）
D丶bird
09-01 1341
前段时间做了一个基于mint ui的联系人列表，写了一个我认为是平民写法的数据操作（因为后台不给我我想要的格式，我得自己去处理），先来看一下效果图 内容是人头像，姓名，所属公司。 内容代码： <mt-index-list> <mt-index-section v-for="(item, index) in letters" :key="index" :inde...
四十四、进阶之vue---mintUI（index List的使用）
sunnnnh的博客
03-18 769
实现功能：1. 通过index List实现城市列表的效果 2. 选择城市（通过cookie获取该城市的id），显示该城市的电影院信息 3. 注意：之前请求的链接都包含相应的城市编号 （1）创建City.vue，并显示城市列表（City.vue） 1. 首先利用axios获取卖座网的城市信息 2. 对获取的城市信息进行过滤，将其过滤为对象数组的形式。 每个对象有一个key值和数组,如{‘A’，["鞍山","安徽"]}...
微信小程序字母检索indexList
08-10
微信小程序字母检索-indexList
微信小程序扩展组件index-list，添加图片
最新发布
qq_34724739的博客
09-26 381
wxss，需要保证图片高度与文字一致，这里是都是96rpx，索引值是98rpx，就是图片每组循环间距98rpx，保证一致不会串，index-group__list 偏移得位置正好放图片。想要实现左边有图面，这种功能，我是将图片定位到组件左边。在页面.json配上路径。
移动端效果之IndexList详解
08-29
移动端效果之IndexList详解 IndexList是移动端效果中的一种常见的列表组件，主要用于展示大量的数据列表，并提供...通过了解IndexList的实现原理和实现方式，我们可以更好地使用这个组件，提高移动端应用的用户体验。
mint-ui-learn：从element学习vue组件
02-06
在"mint-ui-learn-master"项目中，开发者可以通过阅读源代码，了解这些组件的实现原理，同时也可以模拟各种场景来实践这些组件的使用。此外，该项目可能还包含了错误处理、状态管理等方面的实践，这对于深化理解和...
JS实现数组删除指定元素功能示例
01-21
本文实例讲述了JS实现数组删除指定元素功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net JS数组删除指定...
indexlist：indexlist：双向链表，由向量支持
02-05
综上所述，"indexlist" 是一种结合了链表和向量优势的数据结构，它提供了一种高效的双向链表实现，支持随机访问和动态扩容。在适当的情景下，它可以作为替代标准链表的优秀选择，尤其是在需要平衡查找速度和操作灵活...
IndexList 索引列表：城市列表选择
sunluyi的博客
11-09 2843
基本使用 外层包裹一个 index-list 组件，内部锚点通过 index-anchor 组件传入，其余内容可以自定义 可以通过 index-list 参数自定义索引字符列表 需要监听页面的 onPageScroll 事件，将当前滚动条高度传入 index-list 组件 index.list.js下载地址 完整项目代码 <template> <view class="message"> <view class="cityList"> <u-i.
mint-ui-checklist示例
07-29
mint-ui-checklist示例
微信小程序开发之扩展组件问题及解决方法
u010425282的博客
05-12 1375
扩展组件存在着各种各样的问题，我用到的扩展组件问题及解决方法 （后续官方可能会完善，仅代表当前条件下出现的问题） 以下都是复制官方示例的条件下，出现的问题 video-swiper 出现黑白屏现象>>>>>>解决方法，在wxss中加入 以下样式： page{ height:100%; } Index-list 无效，也不报错，那是因为官方的wxml写错了标签，以下官方原文， <mp-indexList class="city__li...
移动端效果之IndexList
糊一笑
10-20 1732
写在前面接着前面的移动端效果讲，这次讲解的的是IndexList的实现原理。效果如下：代码请看这里：github移动端效果之swiper移动端效果之picker移动端效果之cellSwiper1. 核心解析总体来说的原理就是当点击或者滑动右边的索引条时，通过获取点击的索引值来使左边的内容滑动到相应的位置。其中怎样滑动到具体的位置，看下面分解：1.1 基本html代码<div class="index
Mint-ui框架Index List 的应用，以及高度的适配问题
一位不知名小前端的一些笔记
01-26 9545
如何应用mint-ui框架的Index List实现滚动列表及索引导航功能？Index List的高度如何适配？以下是本人开发中一些经验的记录。 Index List（红色区域）。  vue dom结构： 看了一下Index List的源码，发现高度默认为window.innerHeight 减去Index List的getBoundingClientRect().top，也就是除了
Mint Ul --- 制作A-Z字母排序的城市选择列表
删库跑路
06-08 5686
效果图如下： 项目文件存放路径图： pinying.js 和 city.json文件下载传送门 所有代码如下： &amp;amp;amp;lt;template&amp;amp;amp;gt; &amp;amp;amp;lt;mt-index-list&amp;amp;amp;gt; &amp;amp;amp;lt;mt-index-section v-for=&amp;amp;quot;letter in citySortArr&amp;amp;quot;
vue中mint-ui的index-list 在手机端滑动问题
weixin_33720452的博客
11-30 443
官方的demo这里滑动很流畅，按着官网demo复制的在手机上必须手指拖着才能动，不能滑动: 加入 这段代码就行 -webkit-overflow-scrolling: touch; overflow-scrolling: touch; 转载于:https://www.cnblogs.com/520BigBear/p/10043226.html...
中国所有城市（json数据）
热门推荐
Emily
09-13 3万+
中国城市，按A-Z排序。 { "city":[ { "title":"A", "lists":[ "阿坝","阿拉善","阿里","安康","安庆","鞍山","安顺","安阳","澳门" ] }, { "title":"B", "lists":["北京","白银","保定","宝鸡","保山",...
Android studio写一段用recyclerview实现列表索引的完整代码并逐句添加注释
05-31
好的，以下是使用RecyclerView实现列表索引的完整代码，每行代码都有注释说明： ```java // 导入需要使用的类 import android.os.Bundle; import android.view.View; import android.widget.TextView; import androidx.appcompat.app.AppCompatActivity; import androidx.recyclerview.widget.LinearLayoutManager; import androidx.recyclerview.widget.RecyclerView; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { // 声明RecyclerView private RecyclerView recyclerView; // 声明索引列表 private List<String> indexList; // 声明数据列表 private List<String> dataList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 初始化索引列表和数据列表 initData(); // 初始化RecyclerView initRecyclerView(); } // 初始化索引列表和数据列表 private void initData() { indexList = new ArrayList<>(); dataList = new ArrayList<>(); // 添加26个字母到索引列表 indexList.add("#"); for (char i = 'A'; i <= 'Z'; i++) { indexList.add(String.valueOf(i)); } // 添加100个随机字符串到数据列表 for (int i = 0; i < 100; i++) { dataList.add(getRandomString(5)); } } // 初始化RecyclerView private void initRecyclerView() { // 获取RecyclerView控件 recyclerView = findViewById(R.id.recycler_view); // 创建索引适配器 IndexAdapter indexAdapter = new IndexAdapter(indexList); // 创建数据适配器 DataAdapter dataAdapter = new DataAdapter(dataList); // 将索引适配器设置给RecyclerView recyclerView.setAdapter(indexAdapter); // 设置布局管理器 recyclerView.setLayoutManager(new LinearLayoutManager(this)); // 添加分割线 recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL)); // 添加滑动监听器，实现索引联动 recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { super.onScrolled(recyclerView, dx, dy); // 获取第一个可见的item的位置 int firstVisibleItemPosition = ((LinearLayoutManager) recyclerView.getLayoutManager()).findFirstVisibleItemPosition(); // 根据位置获取对应的索引字母 String indexLetter = indexList.get(firstVisibleItemPosition); // 更新索引控件上显示的字母 ((TextView) findViewById(R.id.index_text)).setText(indexLetter); // 将索引字母滚动到屏幕顶部 int indexPosition = indexAdapter.getIndexPosition(indexLetter); ((LinearLayoutManager) recyclerView.getLayoutManager()).scrollToPositionWithOffset(indexPosition, 0); } }); // 将数据适配器设置给RecyclerView recyclerView.setAdapter(dataAdapter); } // 随机生成指定长度的字符串 private String getRandomString(int length) { StringBuilder builder = new StringBuilder(); for (int i = 0; i < length; i++) { builder.append((char) (Math.random() * 26 + 'A')); } return builder.toString(); } // 索引适配器 private class IndexAdapter extends RecyclerView.Adapter<IndexAdapter.ViewHolder> { // 索引列表 private List<String> indexList; // 构造函数 public IndexAdapter(List<String> indexList) { this.indexList = indexList; } // 创建ViewHolder @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_index, parent, false); return new ViewHolder(view); } // 绑定ViewHolder @Override public void onBindViewHolder(ViewHolder holder, int position) { holder.indexText.setText(indexList.get(position)); } // 获取索引字母在数据列表中对应的位置 public int getIndexPosition(String indexLetter) { return dataList.indexOf(indexLetter); } // 获取列表项数量 @Override public int getItemCount() { return indexList.size(); } // ViewHolder类 public class ViewHolder extends RecyclerView.ViewHolder { // 索引控件 private TextView indexText; // 构造函数 public ViewHolder(View itemView) { super(itemView); indexText = itemView.findViewById(R.id.index_text); } } } // 数据适配器 private class DataAdapter extends RecyclerView.Adapter<DataAdapter.ViewHolder> { // 数据列表 private List<String> dataList; // 构造函数 public DataAdapter(List<String> dataList) { this.dataList = dataList; } // 创建ViewHolder @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_data, parent, false); return new ViewHolder(view); } // 绑定ViewHolder @Override public void onBindViewHolder(ViewHolder holder, int position) { holder.dataText.setText(dataList.get(position)); } // 获取列表项数量 @Override public int getItemCount() { return dataList.size(); } // ViewHolder类 public class ViewHolder extends RecyclerView.ViewHolder { // 数据控件 private TextView dataText; // 构造函数 public ViewHolder(View itemView) { super(itemView); dataText = itemView.findViewById(R.id.data_text); } } } } ``` 以上是使用RecyclerView实现列表索引的完整代码，这段代码可以实现一个带有索引的列表，滑动时会自动联动索引位置。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值