一个超级简单的浮动Select

vue代码

<template>
  <view class="index">
    <view class="btn" @tap="openSelect">点击开启浮动select</view>
  </view>
  <view class="floatSelect" v-show="flag">
    <view v-for="(item, index) in dataList" class="item" @tap="closeSelect">{{
      item.name
    }}</view>
    <view class="btnGroup">
      <view @tap="up">上一页</view>
      <view @tap="down">下一页</view>
    </view>
    <view class="end" @tap="closeSelect"></view>
  </view>
</template>

<script>
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;
    },
  },
};
</script>

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