基础组件 之 视图容器 之 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.效果