下面是满足您要求的微信小程序计数器页面的代码示例:
wxml 文件:counter.wxml
<view class="container">
<view class="counter">
<button class="btn" bindtap="decrement">减少</button>
<text class="count">{{ count }}</text>
<button class="btn" bindtap="increment">增加</button>
</view>
</view>
js 文件:counter.js
Page({
data: {
count: 0
},
decrement() {
this.setData({
count: this.data.count - 1
});
},
increment() {
this.setData({
count: this.data.count + 1
});
}
});
wxss 文件:counter.wxss
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.counter {
display: flex;
align-items: center;
}
.btn {
padding: 10rpx 20rpx;
background-color: #007AFF;
color: #FFFFFF;
border-radius: 4rpx;
margin: 0 10rpx;
}
.count {
font-size: 24rpx;
}
json 文件:counter.json
{
"navigationBarTitleText": "计数器"
}
以上代码创建了一个简单的计数器页面。页面中有一个居中的容器,内部包含一个计数器部分,包括一个"减少"按钮、一个用于显示计数的文本框和一个"增加"按钮。点击"减少"按钮将减少计数,点击"增加"按钮将增加计数。计数的初始值为0。
注意:以上代码仅包含满足要求的最基本的代码,可能需要根据您的实际需求进行扩展和修改。