小程序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;
    });
  }
})
相关推荐
naice44 分钟前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼1 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin1 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗1 小时前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6961 小时前
CSS-响应式布局
前端
三小河1 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法1 小时前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku1 小时前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀6961 小时前
2025-35st-w-日常开发总结
前端
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js