web前端全系列 教程
1839个小节阅读:2243k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
使用UI组件库,可以提升开发效率,有一些特效是小程序组件并没有提供的,可以在组件库中寻找
创建一个遮罩层,用于强调特定的页面元素,并阻止用户进行其他操作
在app.json
或index.json
中引入组件
xxxxxxxxxx
"usingComponents": {
"van-overlay": "@vant/weapp/overlay/index"
}
xxxxxxxxxx
<van-button type="primary" bind:click="onClickShow">显示遮罩层</van-button>
<van-overlay show="{{ show }}" bind:click="onClickHide" />
xxxxxxxxxx
Page({
data: {
show: false
},
onClickShow() {
this.setData({ show: true });
},
onClickHide() {
this.setData({ show: false });
},
});
宫格可以在水平方向上把页面分隔成等宽度的区块,用于展示内容或进行页面导航
在app.json
或index.json
中引入组件
xxxxxxxxxx
"usingComponents": {
"van-grid": "@vant/weapp/grid/index",
"van-grid-item": "@vant/weapp/grid-item/index"
}
xxxxxxxxxx
<van-grid>
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
</van-grid>
商品卡片,用于展示商品的图片、价格等信息
在app.json
或index.json
中引入组件
xxxxxxxxxx
"usingComponents": {
"van-card": "@vant/weapp/card/index"
}
xxxxxxxxxx
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
thumb="{{ imageURL }}"
/>