两个按钮控制一个数字的大小,一个增大一个减小。并记忆此数字,即再次编译后,初始值保持上次调整的大小。(微信开发者工具)
// pages/twobutton/index.js
Page({
/**
* 页面的初始数据
*/
data: {
counter: 0,
},
cacl(step) {
const counter = this.data.counter + step
this.setData({
counter
})
wx.setStorageSync('counter', counter)
},
add() {
this.cacl(1)
},
sub() {
this.cacl(-1)
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
this.setData({
counter: wx.getStorageSync('counter') || 0
})
},
})
<!--pages/twobutton/index.wxml-->
<text class="text">{{counter}}</text>
<button bindtap="add" class="button">增大</button>
<button bindtap="sub" class="button">减小</button>
/* pages/twobutton/index.wxss */
.text{
text-align: center;
}
.button{
background-color: green;
margin-bottom: 1rem;
}
如果是网页可以利用cookies session 以及数据库存储来实现,下次打开的时候默认显示上次的记录,如果没有上次的记录就显示默认参数。
如果是小程序,可以通过小程序的本地缓存函数来解决这个问题。也可以通过数据库二次读取把它赋值到界面中。