小程序Subsection 分段器使用CSS实现

沐千熏2024-12-03 12:11

CSS

bash 复制代码

/* 分段器样式 */
.segment {
  display: flex;
  justify-content: flex-start;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  padding: 10rpx;
  position: relative;
  overflow-x: hidden;
}

.segment-item {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx;
  border-radius: 10rpx;
  color: #333;
  font-size: 23rpx;
  font-weight: 200;
  background-color: #f8f8f8;
}

.indicator {
  position: absolute;
  display: flex;
  width: 40%;
  height: 70%;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: #007aff;
  border-radius: 10rpx;
  background-color: #fff;
  transition: transform 0.3s;
}
/*  */

WXML

bash 复制代码

    <view class="segment" style="width: 230rpx;height: 65rpx;">
      <view class="segment-item" bindtap="sectionChange" data-type="2" data-index="0">开</view>
      <view class="segment-item" bindtap="sectionChange" data-type="2" data-index="1">关</view>
      <view class="indicator" style="transform: translateX({{m_hint1 === 0 ? '0' : '125%'}})">
        {{m_hint1 === 0 ? '开' : '关'}}
      </view>
    </view>

JSON

van-dialog 是 Vant Weapp 组件

bash 复制代码

{
  "navigationBarBackgroundColor": "#394147",
  "navigationBarTitleText": "设备设置",
  "navigationBarTextStyle": "white",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": false,
  "backgroundColor": "#394147",
  "usingComponents": {
    "van-dialog": "../../vant-weapp/dialog/index"
  }
}

JS

bash 复制代码

Page({
  /**
   * 页面的初始数据
   */
  data: {
    m_hint1 : 0,
  },
  sectionChange(event){
    const type = parseInt(event.currentTarget.dataset.type);
    const index = parseInt(event.currentTarget.dataset.index);
    
    Dialog.confirm({
      confirmButtonText: "确定",
      title: '确定修改',
      message: "确定要修改设备的"+this.data.describeList[type-1]+"？"
    }).then(() => {
      	this.setData({
            m_hint1: index
        })
      
    }).catch(() => {
      console.log("Dialog - Cancel");
      return;
    });
  }
})