javascript|一个超级简单的浮动Select 小程序|java

vue代码

> 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); } }