微信小程序之基础组件之视图容器之view详解

基础组件 之 视图容器 之 view 详解

 

1.概述

view即视图容器。

 

 

2.代码

 

2.1.WXSS代码

view {
  margin: 20px;
}

button {
  margin: 20px;
}

.viewposition {
  text-align: center;
}

 

2.2.WXML代码

<view class='viewposition'>{{num}}</view>
<button type="default" bindtap='defaultButton'>点击改变初始值</button>

 

2.3.JS代码

Page({


  /**
   * 页面的初始数据
   */
  data: {
    num:'点击前',
  },


  /**
   * 增加初始值按钮点击
   */

  defaultButton: function() {
    this.setData({
      num: '点击后',
    })

  },

  /**
   * 绿色按钮点击
   */

  primaryButton: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })

  },


  /**
   * 警告按钮点击
   */

  warnButton: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })

  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }

})

 

2.4.效果