vue代码
点击开启浮动select
{{
item.name
}}
上一页
下一页
>
import { ref } from "vue";
import Taro from "@tarojs/taro";
import { AtFlex, AtFlexItem, AtInput } from "taro-ui-vue3";
import "./floatSelect.scss";
export default {
data() {
return {
list: [
{ name: "测试选项001" },
{ name: "测试选项002" },
{ name: "测试选项003" },
{ name: "测试选项004" },
{ name: "测试选项005" },
{ name: "测试选项006" },
{ name: "测试选项007" },
{ name: "测试选项008" },
{ name: "测试选项009" },
{ name: "测试选项0010" },
{ name: "测试选项0011" },
{ name: "测试选项0012" },
{ name: "测试选项0013" },
],
dataList: [],
end: 5,
start: 0,
numPage: null,
currentPage: 1,
flag: false,
};
},
created() {
this.numPage = this.list.length % 5;
this.dataList = this.list.slice(0, 5);
console.log(this.numPage);
},
methods: {
signIn() {
wx.navigateTo({
url: "../signIn/signIn",
});
},
up() {
if (this.currentPage > 1) {
this.end = this.start;
this.start = this.start - 5;
this.currentPage--;
this.dataList = this.list.slice(this.start, this.end);
} else {
Taro.showToast({
title: "已为第一页",
duration: 2000,
});
}
},
down() {
if (this.currentPage < this.numPage) {
this.start = this.start + 5;
this.end = this.end + 5;
this.currentPage++;
this.dataList = this.list.slice(this.start, this.end);
} else {
Taro.showToast({
title: "已为最后一页",
duration: 2000,
});
}
},
openSelect() {
this.flag = true;
},
closeSelect() {
this.flag = false;
},
},
};
【javascript|一个超级简单的浮动Select】CSS样式
.btn {
padding: 24rpx 48rpx 24rpx 48rpx;
background-color: #4e6ef2;
text-align: center;
color: #fff;
z-index: 99;
margin: 48rpx;
}
.index {
z-index: 98;
}
.floatSelect {
width: 100%;
height: 100vh;
background-color: rgba($color: #242424, $alpha: 0.2);
position: absolute;
z-index: 100;
top: 0;
.item {
z-index: 101;
display: flex;
height: 80rpx;
align-items: center;
background-color: #fff;
border-bottom: 2rpx solid #f1f1f1;
padding-left: 32rpx;
font-size: 32rpx;
}
.btnGroup {
display: flex;
flex-direction: row;
z-index: 102;
height: 90rpx;
view {
background-color: #fff;
width: 50%;
padding: 18rpx 0 18rpx 0;
text-align: center;
border: #66bbf3 2rpx solid;
color: #66bbf3;
font-size: 36rpx;
}
}
.end {
height: calc(100vh - 510rpx);
width: 100%;
background-color: rgba($color: #242424, $alpha: 0);
}
}推荐阅读
- java|如何写出让同事无法维护的代码（）
- 高级前端工程之路|《代码规范》如何写出干净的代码（二）函数与方法
- java|云原生爱好者周刊（服务网格的困境与破局）
- 运维|云原生爱好者周刊（VMware Tanzu 社区版发布，无任何限制！）
- java|云原生爱好者周刊（Grafana Loki 免费电子书）
- kubernetes|云原生爱好者周刊（好家伙，Rust 也成立云原生组织了）
- 大数据|11 个可以部署在 Linux 服务器上的开源论坛软件 | Linux 中国
- java|【2017中国开发者调查报告】你看那个人，好像一个程序员哦！
- 架构必问（CDN 是什么（为什么快？？））