移动端-自定义滑屏菜单组件文档

最新推荐文章于 2024-03-21 08:52:58 发布

Augustine_Cyq

最新推荐文章于 2024-03-21 08:52:58 发布

阅读量314

点赞数

文章标签：前端组件

本文链接：https://blog.csdn.net/Augustine_Cyq/article/details/85699124

版权

本文档详细介绍了如何创建一个自定义的移动端滑屏菜单组件。包括UI原型展示，HTML结构，CSS样式以及核心的JavaScript代码，特别是使用了move.js和tween.js库来实现平滑的动画效果。此外，还提供了在Vue.js中应用该组件的方法以及必要的配置参数说明。

摘要由CSDN通过智能技术生成

UI原型如下

HTML结构代码

<div class="select-component">
    <div class="mask" @click="openMenu"></div>
    <div class="scroll-side">
        <div class="head">
                <span>添加提单号</span><i class="iconfont icon-guanbi1" @click="openMenu"></i>
        </div>
        <div class="search">
                <input type="text" placeholder="搜索提单号" @input="searchFunc($event)"/>
        </div>
        <div class="scroll-wrapper">
                <ul class="content">
                        <li v-for="(item, index) in checkedList"
                                class="content-item" 
                                @touchstart.prevent="touchStartFunc($event)"
                                @touchend.prevent="touchEndFunc($event, item)">
                                <label :for="'check'+index"><i class="iconfont icon-gou1" v-cloak v-show="item.show"></i></label>						
                                <input type="checkbox" :id="'check'+index"/>
                                <span class="text">{
  {item.val}}</span>
                        </li>
                </ul>
        </div>
        <div class="sure">
                <button>确定</button>
        </div>
    </div>
</div>

css代码

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

button{
		border: none;
		outline: none;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
}
[v-cloak]{
	display: none;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
   	color: #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   	color: #fff;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   	color: #fff;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   	color: #fff;
}
.select-component {
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	overflow: hidden;
	z-index: 600;
	visibility: hidden;
	opacity: 0;
}

.select-component .mask{
	width: 100%;
	height: 100%;
	background-color: #3b4e6c;
	opacity: 1;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 998;
}

.select-component .scroll-side{
	width: 92%;
	max-height: 86vh;
	background: -webkit-linear-gradient(to bottom,#5aabe3,#4690C3);
	background: -moz-linear-gradient(to bottom,#5aabe3,#4690C3);
	background: -o-linear-gradient(to bottom,#5aabe3,#4690C3);
	background: -ms-linear-gradient(to bottom,#5aabe3,#4690C3);
	background: linear-gradient(to bottom,#5aabe3,#4690C3);
	position: absolute;
	left: 4%;
	top: -86vh;
	z-index: 999;
	-webkit-transition: .3s all;
	-moz-transition: .3s all;
	-ms-transition: .3s all;
	-o-transition: .3s all;
	transition: .3s all;
	overflow: hidden;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid #fff;
}

.select-component .scroll-side .head {
	height: 40px;
	line-height: 40px;
	color: #3C3C3C;
  padding-left: 30px;
}

.select-component .scroll-side .head i.iconfont{
	font-size: 30px;
  color: #305669;
  position: absolute;
  right: 0px;
  top: -1px;
}
.select-component .scroll-side .head span {
	display: inline-block;
  font-size: 17px;
  background-color: #80d1e5;
  height: 24px;
  line-height: 20px;
  padding: 2px 26px;
  border-radius: 10px;
  font-weight: bold;
  letter-spacing: 1px;
}

.select-component .scroll-side .head i {
	padding: 0 10px;
}

.select-component .scroll-side .search {
	height: 44px;
	line-height: 44px;
	padding: 0px 20px;
}

.select-component .scroll-side .search input {
	width: 100%;
	height: 34px;
	border: 2px solid #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-indent: 10px;
	background-color: #5daae0;
	color: #fff;
}

.scroll-wrapper {
	max-height: calc(86vh - 133px);
	overflow: hidden;
	position: relative;
	padding: 0px 20px 0px 20px;
	margin-top: 5px;
}

.select-component .scroll-side ul.content {
}

.select-component .scroll-side ul.content li {
	font-size: 14px;
	color: #525151;
	padding: 4px;
	border: 1px solid #fff;
	padding-left: 50px;
	-webkit-transition: .3s all;
	-moz-transition: .3s all;
	-ms-transition: .3s all;
	-o-transition: .3s all;