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

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;
    });
  }
})
相关推荐
阿虎儿27 分钟前
MCP
前端
毕小宝40 分钟前
编写一个网页版的音频播放器,AI 加持,So easy!
前端·javascript
万水千山走遍TML40 分钟前
JavaScript性能优化
开发语言·前端·javascript·性能优化·js·js性能
Aphasia31141 分钟前
react必备JS知识点(一)——判断this指向👆🏻
前端·javascript·react.js
会飞的鱼先生1 小时前
vue3中slot(插槽)的详细使用
前端·javascript·vue.js
小小小小宇1 小时前
一文搞定CSS Grid布局
前端
0xHashlet1 小时前
Dapp实战案例002:从零部署链上计数器合约并实现前端交互
前端
知心宝贝1 小时前
🔍 从简单到复杂:JavaScript 事件处理的全方位解读
前端·javascript·面试
安余生大大1 小时前
关于Safari浏览器在ios<16.3版本不支持正则表达式零宽断言的解决办法
前端
前端涂涂1 小时前
express查看文件上传报文,处理文件上传,以及formidable包的使用
前端·后端