微信小程序用vant组件制作通讯录

微信小程序用vant组件制作通讯录
效果图：

代码如下：
.wxml:

在这里插入<van-index-bar index-list="{{ indexList }}"><view><van-index-anchor index="省" use-slot="true">省级负责人</van-index-anchor><view class='user' wx:for='{{provList}}'wx:key='name'><image class='icon' src='{{item.photo}}'></image> <view class='text'>{{item.name}}</view></view></view><view><van-index-anchor  class='title' index="市" use-slot="true">市级负责人</van-index-anchor><view class='user' wx:for='{{cityList}}'wx:key='name'><image class='icon' src='{{item.photo}}'></image> <view class='text'>{{item.name}}</view></view></view><view><van-index-anchor index="区" use-slot="true">区级负责人</van-index-anchor><view class='user' wx:for='{{districtList}}'wx:key='name'><image class='icon' src='{{item.photo}}'></image> <view class='text'>{{item.name}}</view></view></view><view><van-index-anchor index="镇" use-slot="true" >镇级负责人</van-index-anchor><view class='user' wx:for='{{townList}}'wx:key='name'><image class='icon' src='{{item.photo}}'></image> <view class='text'>{{item.name}}</view></view></view><view><van-index-anchor index="村" use-slot="true">村级负责人</van-index-anchor><view class='user' wx:for='{{villageList}}'wx:key='name'><image class='icon' src='{{item.photo}}'></image> <view class='text'>{{item.name}}</view></view></view>
</van-index-bar>代码片

.js文件

 data: {indexList:["省","市","区","镇","村"],provList:[{ name:'李宏伟',photo:'/images/1.jpg'},{ name:'赵爱国',photo:'/images/2.jpg'}],cityList:[{ name:'钱必胜',photo:'/images/3.jpg'},{ name:'李美丽',photo:'/images/4.jpg'}],districtList:[{ name:'王爱丽',photo:'/images/5.jpg'},{ name:'李秀秀',photo:'/images/5.jpg'}],townList:[{ name:'马鑫',photo:'/images/6.jpg'},{ name:'赵明华',photo:'/images/7.jpg'}],villageList:[{ name:'赵小妹',photo:'/images/8.jpg'},{ name:'周庭',photo:'/images/9.jpg'},{name:"周国伟",photo:"/images/3.jpg"}],},

.wxss

.user{border-bottom: 2rpx gray solid;height:38px ;display: flex;
}
.icon{width: 35px;height: 35px;border-radius: 10px;flex:1;margin: 0px 18px;
}
.text{margin:0px;line-height:38px;flex: 8;
}

.json文件

 "usingComponents": {"van-index-bar": "/miniprogram_npm/@vant/weapp/index-bar/index","van-index-anchor": "/miniprogram_npm/@vant/weapp/index-anchor/index","van-cell":"/miniprogram_npm/@vant/weapp/cell/index"},//引入vant组件

微信小程序用vant组件制作通讯录相关推荐

微信小程序调用Vant组件库
微信小程序调用Vant组件库 Vant Weapp 微信小程序引入Vant Weapp 调用Vant Weapp组件 Vant Weapp 轻量.可靠的小程序 UI 组件库链接: vant开发指南. ...
微信小程序使用vant组件报错
背景介绍:在一个月之前新建了一个微信小程序项目,新建一个项目参照了微信小程序npm支持的步骤,构建了npm,官网地址如下: npm 支持 | 微信开放文档之后分别在两台电脑上跑过,之前预览开发版代 ...
微信小程序引入Vant组件库
前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...
【微信小程序】vant组件tab标签页标签栏大小自适应改变
文章目录前言一.更改前二.更改内容 1.js 2.wxss 三.更改后前言 vant组件v1.9.2,tab组件样式都写为px,更改几处为rpx即可.其他子组件也可这样进行修改.但最好不要直接 ...
微信小程序引用Vant组件库message：没有找到可以构建的 NPM 包，请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内...
问题描述 message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内,或配置 project.config.json 的 pack ...
微信小程序引用vant Weapp
vant-weapp官网https://youzan.github.io/vant-weapp/#/quickstarthttps://youzan.github.io/vant-weapp/#/qu ...
微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
微信小程序用vant自定义tabbar页面并跳转相应页面
0.前置安装步骤一安装 vant 组件库 npm i @vant/weapp -S --production 下载完后要npm构建才能使用步骤二修改 app.json 将 app.json 中 ...
微信小程序引用vant toast 提示 “未找到 van-toast 节点“
微信小程序引用vant 的toast 出现如下报错都是因为没有正确引入toast 组件正确引入toast 组件需要在三个文件中设置在 .wxml 文件的 view 内写入 <van-toa ...

微信小程序用vant组件制作通讯录

微信小程序用vant组件制作通讯录相关推荐

最新文章

热门文章