WX-组件-基础内容

一.icon
图标

属性

  • type
  • size
  • color

二.text
文本,支持转义字符.text组件内只支持text嵌套.除了文本节点以外的其他节点都无法长按选中.

<text>{{text}}</text>
var initData = "this is first line\nthis is second line"

三.progress
进度条

属性
- percent: float
- show-info: boolean,默认值为false,是否在进度条右侧显示百分比
- stroke-width: number,默认值6,进度条线的宽度.
- color: 进度条颜色
- active: boolean,默认值false,进度条从左往右的动画

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vant-weapp是一个基于微信小程序的组件库,它由有赞前端团队开发和维护。vant-weapp提供了丰富的UI组件和丰富的功能,可以帮助开发者快速构建高品质的微信小程序应用。下面是vant-weapp的一些特点[^1]: 1. 提供了丰富的基础组件,如button、cell、toast等 2. 包含了各种常见业务场景所需的组件,如address-edit、coupon-cell、goods-action等 3. 提供了可定制的主题和多语言支持 4. 支持按需引入,不必全部引入所有组件 以下是演示如何快速搭建一个带有导航栏和tab栏的微信小程序应用: 1. 首先,可以通过npm安装vant-weapp,具体步骤可以参考vant-weapp的官方文档。 2. 在app.json文件中引入需要使用的组件,如下所示:[^2] ```json { "pages": [ "pages/index/index", "pages/logs/logs", "pages/demo/button/button" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "backgroundColor": "#ffffff", "borderStyle": "white", "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/img/icon_home.png", "selectedIconPath": "static/img/icon_home_HL.png" }, { "pagePath": "pages/logs/logs", "text": "日志", "iconPath": "static/img/icon_log.png", "selectedIconPath": "static/img/icon_log_HL.png" }] } } ``` 3. 在需要使用组件的wxml文件中引入组件,如下所示:[^2] ```html <!-- 引入导航栏组件 --> <van-nav-bar title="导航栏" left-text="返回" left-arrow bind:click-left="onClickLeft" /> <!-- 引入tab栏组件 --> <van-tabbar active="{{ active }}" bind:change="onChange"> <van-tabbar-item icon="home-o">首页</van-tabbar-item> <van-tabbar-item icon="search">搜索</van-tabbar-item> <van-tabbar-item icon="friends-o">朋友</van-tabbar-item> <van-tabbar-item icon="setting-o">我的</van-tabbar-item> </van-tabbar> ``` 4. 在对应的js文件中编写组件的交互逻辑,比如点击事件等,如下所示:[^2] ```javascript Page({ data: { active: 0 }, onClickLeft() { wx.showToast({ title: '返回' }); }, onChange(event) { this.setData({ active: event.detail }); } }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值