P5组件库_5.复杂类型的组件怎么用
miniprogram\pages\index\index.wxml
<view class="container">
<van-button bindtap="onClick" type="info" plain icon="gem-o" size="large">主要按钮</van-button>
<view class="user"><van-icon name="manager" />如来佛</view>
<van-cell title="单元格" icon="volume-o" size="large" is-link/>
<van-cell title="单元格" icon="volume-o" size="large" is-link value="5人"/>
</view>
<van-button bindtap="onTap" type="primary">选择{{ value }}</van-button>
<van-action-sheet
show="{{ show }}"
actions="{{ arr }}"
bind:close="onClose"
bind:select="mySelect"
/>
<van-rate value="{{ myValue }}" bind:change="onChange" /><text>{{ myValue }}</text>
miniprogram\pages\index\index.js
Page({
/**
* 页面的初始数据
*/
data: {
show: false,
arr:[
{name:"张三"},
{name:"历史"},
{name:"蒜头"},
{name:"西瓜"},
],
value:""
},
onTap(){
this.setData({
show:true
})
},
onClick(){
wx.showToast({
title: '成功',
})
},
onClose(){
this.setData({
show:false
})
},
mySelect(res){
console.log(res.detail.name)
this.setData({
myValue:res.detail.name
})
},
onChange(res){
console.log(res.detail)
this.setData({
myValue:res.detail
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
miniprogram\app.json
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云开发 QuickStart",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"usingComponents": {
"van-button": "@vant/weapp/button/index",
"van-icon": "@vant/weapp/icon/index",
"van-cell": "@vant/weapp/cell/index",
"van-action-sheet": "@vant/weapp/action-sheet/index",
"van-rate": "@vant/weapp/rate/index"
}
}