微信小程序 左右滑动块,自定义的switch组件,带文字状态的开关

复制代码
<template>
  <view class="pageMain">
    <view class="mp-switch" style="--mp-switch-width: {{width}}px;--mp-switch-height: {{height}}px;--mp-switch-text: '{{checked?trueText:falseText}}';">
	<view class="wx-switch-input {{checked?'wx-switch-input-checked':''}}" bind:tap="onChange"></view>
</view>
 </view>
</template>

<style lang="less">
.mp-switch .wx-switch-input {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	width: var(--mp-switch-width);
	height: var(--mp-switch-height);
	border: 1px solid #DFDFDF;
	outline: 0;
	border-radius: calc(var(--mp-switch-height) / 2);
	box-sizing: border-box;
	background-color: #e5e5e5;
	transition: background-color 0.1s, border 0.1s;
}

.mp-switch .wx-switch-input::before {
	content: var(--mp-switch-text);
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--mp-switch-width) - 2px);
	height: calc(var(--mp-switch-height) - 2px);
	line-height: calc(var(--mp-switch-height) - 2px);
	font-size: calc(var(--mp-switch-height) / 2.2);
	padding-left: calc(var(--mp-switch-height));
	padding-right: 6px;
	box-sizing: border-box;
	overflow: hidden;
	color: #999;
	text-align: center;
	background-color: transparent;
}

.mp-switch .wx-switch-input::after {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--mp-switch-height) - 2px);
	height: calc(var(--mp-switch-height) - 2px);
	border-radius: 50%;
	background-color: #FFFFFF;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.mp-switch .wx-switch-input.wx-switch-input-checked {
	border-color: #07C160;
	background-color: #07C160;
}

.mp-switch .wx-switch-input.wx-switch-input-checked::before {
	color: #fff;
	padding-right: calc(var(--mp-switch-height));
	padding-left: 6px;
}

.mp-switch .wx-switch-input.wx-switch-input-checked::after {
	-webkit-transform: translateX(calc(var(--mp-switch-width) - var(--mp-switch-height)));
	transform: translateX(calc(var(--mp-switch-width) - var(--mp-switch-height)));
}
</style>

  data = {
 
    trueText: '开',
    falseText: '关',
    checked:false,
      width:72,
      height: 32,
  }

methods = {
     onChange() {
      this.checked= !this.checked
     this.$apply()
        },


  }
相关推荐
Uluoyu14 小时前
word、pdf文档内容提取工具类
java·pdf·word
@大迁世界14 小时前
Promise.all 与 Promise.allSettled:一次取数的小差别,救了我的接口
开发语言·前端·javascript·ecmascript
知识分享小能手14 小时前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
自由的疯14 小时前
java 怎么判断事务有无提交成功
java·后端·架构
DoraBigHead15 小时前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
LuckySusu15 小时前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
卓伊凡15 小时前
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
前端
笨笨鸟慢慢飞15 小时前
Vue3后退不刷新,前进刷新
前端
流星白龙15 小时前
【Qt】3.认识 Qt Creator 界面
java·开发语言·qt
LuckySusu15 小时前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js