小程序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;
    });
  }
})
相关推荐
西陵3 分钟前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
小磊哥er14 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
ᥬ 小月亮24 分钟前
webpack基础
前端·webpack
YongGit43 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc