P5コンポーネントライブラリ_5。複雑なタイプのコンポーネントの使用方法

P5コンポーネントライブラリ_5。複雑なタイプのコンポーネントの使用方法

ガジェット\ページ\インデックス\ 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>

 

ガジェット\ページ\インデックス\ 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 () {
    
  }
})

 

ミニプログラム\ 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"
  }
}