From 8e21641cfe85772db049f69c16affc7951bd321b Mon Sep 17 00:00:00 2001
From: weixin_47563380 <weixin_47563380@devide>
Date: Fri, 16 Aug 2024 14:28:00 +0800
Subject: [PATCH] Fri Aug 16 14:28:00 CST 2024 inscode

---
 test/pages/mulbutton/mulbutton.js   | 86 +++++++++++++++++++++++++++++
 test/pages/mulbutton/mulbutton.json |  3 +
 test/pages/mulbutton/mulbutton.wxml | 26 +++++++++
 test/pages/mulbutton/mulbutton.wxss | 68 +++++++++++++++++++++++
 4 files changed, 183 insertions(+)
 create mode 100644 test/pages/mulbutton/mulbutton.js
 create mode 100644 test/pages/mulbutton/mulbutton.json
 create mode 100644 test/pages/mulbutton/mulbutton.wxml
 create mode 100644 test/pages/mulbutton/mulbutton.wxss

diff --git a/test/pages/mulbutton/mulbutton.js b/test/pages/mulbutton/mulbutton.js
new file mode 100644
index 0000000..a53fa9d
--- /dev/null
+++ b/test/pages/mulbutton/mulbutton.js
@@ -0,0 +1,86 @@
+// 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
diff --git a/test/pages/mulbutton/mulbutton.json b/test/pages/mulbutton/mulbutton.json
new file mode 100644
index 0000000..6f5247b
--- /dev/null
+++ b/test/pages/mulbutton/mulbutton.json
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/test/pages/mulbutton/mulbutton.wxml b/test/pages/mulbutton/mulbutton.wxml
new file mode 100644
index 0000000..f2195d5
--- /dev/null
+++ b/test/pages/mulbutton/mulbutton.wxml
@@ -0,0 +1,26 @@
+<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
diff --git a/test/pages/mulbutton/mulbutton.wxss b/test/pages/mulbutton/mulbutton.wxss
new file mode 100644
index 0000000..8840684
--- /dev/null
+++ b/test/pages/mulbutton/mulbutton.wxss
@@ -0,0 +1,68 @@
+/* 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;
+}
-- 
GitLab