Fri Aug 16 14:28:00 CST 2024 inscode

test/pages/mulbutton/mulbutton.js

+// pages/mulbutton/mulbutton.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {  
+    buttons: [  
+      { text: '按钮1', active: false },  
+      { text: '按钮2', active: false },  
+      { text: '按钮3', active: false },  
+    ],  
+    selectedIndex: null, // 记录当前选中的按钮索引  
+  },  
+  handleClick: function(e) {  
+    const index = e.currentTarget.dataset.index;  
+    // 先将所有按钮置为非激活状态  
+    let buttons = this.data.buttons.map(button => {  
+      button.active = false;  
+      return button;  
+    });  
+    // 将当前点击的按钮置为激活状态  
+    buttons[index].active = true;  
+    // 更新数据和页面  
+    this.setData({  
+      buttons,  
+      selectedIndex: index,  
+    });  
+  },  
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})
\ No newline at end of file

test/pages/mulbutton/mulbutton.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

test/pages/mulbutton/mulbutton.wxml

+<view class="test">
+  <view class="buttontype" wx:for="{{buttons}}" wx:key="index" data-index="{{index}}" bindtap="handleClick" style="{{item.active ? 'background-color: #14cfdc; color: white;' : 'background-color: #f0f0f0; color: black;'}}">
+    {{item.text}}
+  </view>
+</view>
+
+<view class="test">
+  <text class="textbutton" wx:for="{{buttons}}" wx:key="index" data-index="{{index}}" bindtap="handleClick" style="{{item.active ? 'background-color: #007aff; color: white;' : 'background-color: #f0f0f0; color: black;'}}">
+    {{item.text}}
+  </text>
+</view>
+
+<view class="test">
+  <text class="textbutton">11
+  </text>
+  <text class="textbutton">11
+  </text>
+  <text class="textbutton">11
+  </text>
+</view>
+
+<view class="bottom">
+  <button size="mini" class="zhuanfa1">转发评分</button>
+  <button size="mini" class="jisuan">计算得分</button>
+  <button size="mini" class="chakan">查看记录</button>
+</view>
\ No newline at end of file

test/pages/mulbutton/mulbutton.wxss

+/* pages/mulbutton/mulbutton.wxss */
+.container {
+  width: 320px;  
+  height: 30%;
+  
+  /*justify-content: space-around;  按钮之间的间隔平均分布，也可以根据需要调整 */  
+  align-items: center; /* 垂直居中，如果按钮高度不一致时有用 */  
+  padding: 10px; /* 容器内边距 */  
+} 
+.container button {  
+  width: 85px;
+  padding: 5px 5px;  
+  margin: 5px;  
+  background-color: #f0f0f0; /* 默认颜色 */  
+  border: none;  
+  outline: none;  
+}  
+.test{
+  display: flex; /* 使用Flexbox布局 */  
+  padding: 5px 5px; 
+  align-items: center; /* 垂直居中，如果按钮高度不一致时有用 */  
+  background-color: rgb(130, 238, 229);
+}
+.textbutton{ 
+  padding: 5px 5px; 
+  margin: 5px; 
+  width: 80px;
+  height: 40px;
+  text-align: center; /* 使文本居中 */ 
+  background-color: rgb(109, 219, 95);
+  justify-content: center;
+  border-radius:10PX;
+}
+.buttontype{
+  padding: 5px 5px; 
+  width: 85px;
+  margin: 10px;
+  text-align: center; /* 使文本居中 */ 
+  justify-content: center;
+  border-radius:8PX;
+  border: 1px solid;
+}
+
+.bottom{
+  position: fixed;
+  width: 90%;
+  margin: 0 5%;
+  display: flex;/* 如果把盒子设置为弹性盒子,必须要加的 */
+  flex-direction: row;/* 设置一个大盒子内容垂直排列*/
+  align-items: center;/* 设置一个大盒子内容居中排列*/
+  bottom: 20rpx;
+}
+.jisuan{
+  color:#14cfdc;
+  border: 1px solid #DC143C;
+}
+.zhuanfa1{
+  position: absolute;
+  color:	#228B22;
+  border: 1px solid 	#228B22;
+}
+
+.chakan{
+  position: absolute;
+ right: 0%;
+  color: #000000;
+  border: 1px solid #000000;
+}