做网站需要多大空间,企业网站背景颜色,用flash做的ppt模板下载网站,wordpress顶栏一、安装Vant
1、在 资源管理器 空白位置#xff0c;点右键打开 在外部终端窗口打开 2、初始化NPM npm init -y 3、安装命令 npm i vant/weapp1.3.3 -S --production 4、构建NPM包
在 工具 里选择构建NPM包
5、删除style:v2
在app.json里#xff0c;删除style点右键打开 在外部终端窗口打开 2、初始化NPM npm init -y 3、安装命令 npm i vant/weapp1.3.3 -S --production 4、构建NPM包
在 工具 里选择构建NPM包
5、删除style:v2
在app.json里删除style:v2
6、按需引入
// app.json
usingComponents: {van-button: vant/weapp/button/index
}
7、使用
van-button typeprimary按钮/van-button
二、CSS自定义样式
1、定义
element {--main-bg-color: brown;
}
:root {--main-bg-color: brown;
} 2、使用
element {background-color: var(--main-bg-color: brown);
}
三、自定义TabBar
1、配置
在app.json中的 tabBar 配置中加上 custom: true, 表示要自定义不再使用list
为了兼容低版本list虽然作废但是也不能删 tabBar: {custom: true,list: [{....
2、新建自定义文件
在根目录下新建 custom-tab-bar文件夹在里面新建index文件 3、引入vant依赖
vant中的tabBar组件介绍
Vant Weapp - 轻量、可靠的小程序 UI 组件库 4、基础tabBar
vant中的基本tabBar代码
van-tabbar active{{ active }} bind:changeonChangevan-tabbar-item iconhome-o标签/van-tabbar-itemvan-tabbar-item iconsearch标签/van-tabbar-itemvan-tabbar-item iconfriends-o标签/van-tabbar-itemvan-tabbar-item iconsetting-o标签/van-tabbar-item
/van-tabbar配套的JS代码
Page({data: {active: 0,},onChange(event) {// event.detail 的值为当前选中项的索引this.setData({ active: event.detail });},
});
自定义图标的使用
icon 表示未选中 时 显示的图标
icon-active 表示选中 时 显示的图标
info3 表示图标右上的小数字
van-tabbar active{{ active }} bind:changeonChangevan-tabbar-item info3imagesloticonsrc{{ icon.normal }}modeaspectFitstylewidth: 30px; height: 18px;/imagesloticon-activesrc{{ icon.active }}modeaspectFitstylewidth: 30px; height: 18px;/自定义/van-tabbar-itemvan-tabbar-item iconsearch标签/van-tabbar-itemvan-tabbar-item iconsetting-o标签/van-tabbar-item
/van-tabbar
配套的JS
Page({data: {active: 0,icon: {normal: https://img.yzcdn.cn/vant/user-inactive.png,active: https://img.yzcdn.cn/vant/user-active.png,},},onChange(event) {this.setData({ active: event.detail });},
});最后把标签的名字和图片都写在list数组里面
data: {list: [{pagePath: /pages/home/home,text: 首页,iconPath: /images/tabs/home.png,selectedIconPath: /images/tabs/home-active.png},{pagePath: /pages/message/message,text: 消息,iconPath: /images/tabs/message.png,selectedIconPath: /images/tabs/message-active.png,info: 0},{pagePath: /pages/contact/contact,text: 联系我们,iconPath: /images/tabs/contact.png,selectedIconPath: /images/tabs/contact-active.png}]}
使用时
van-tabbar active{{active}} bind:changeonChange active-color#13A7A0van-tabbar-item wx:for{{list}} wx:keyindex info{{item.info ? item.info : }}image sloticon src{{item.iconPath}} modeaspectFit stylewidth: 25px; height: 25px; /image sloticon-active src{{item.selectedIconPath}} modeaspectFit stylewidth: 25px; height: 25px; /{{item.text}}/van-tabbar-item
/van-tabbar
在自定义组件中使用 Vant Weapp 组件时需在 options 开启 styleIsolation: shared 选项不然修改的样式不会生效
实现跳转Tab功能 onChange(event) {// event.detail 的值为当前选中项的索引// this.setData({ active: event.detail })this.updateActive(event.detail)wx.switchTab({url: this.data.list[event.detail].pagePath,})},
