小程序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;
    });
  }
})
相关推荐
Liquad Li几秒前
Angular 面试题及详细答案
前端·angular·angular.js
源码师傅6 分钟前
uniapp开源多商户小程序商城平台源码 支持二次开发+永久免费升级
小程序·uni-app·多商户商城源码·uniapp开源商城源码·开源多商户小程序商城平台·商城小程序代码·多商户商城小程序源码
用户214118326360229 分钟前
首发!即梦 4.0 接口开发全攻略:AI 辅助零代码实现,开源 + Docker 部署,小白也能上手
前端
gnip2 小时前
链式调用和延迟执行
前端·javascript
SoaringHeart2 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.2 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
weixin_177297220692 小时前
盲盒抽卡机小程序:从0到1的蜕变之路
小程序·盲盒·抽谷机
说私域3 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的移动互联网人气氛围营造机制研究
人工智能·小程序·开源
Dragon Wu3 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss3 小时前
Vue3源码reactivity响应式篇之watch实现
前端·vue3