uniapp自己制作的级联下拉框

piaoyiren

于 2024-08-10 08:34:59 发布

阅读量215

点赞数

文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/piaoyiren/article/details/141083760

版权

<template>
  <view>
    <button @click="showModal">打开选择器</button>
    <view v-if="isModalVisible" class="modal-overlay">
      <view class="modal" style="width: 100%;height:500px;">
        <view class="container" style="heigth:66px;">
          <input type="text" v-model="keyWord" placeholder="请输入关键词搜索"
                 style="margin-left:5%;border-radius: 4px;height:36px;margin-top:4px;width: 65%;text-align: left;"
                 />
          <button @click="hideModal()" style="background-color: dodgerblue;color: white;width: 80px;">确定</button>
        </view>
        <view class="container" style="height:68px;margin-top: 10px;margin-bottom: 10px;">
          <button
              :style="{ border: isActiveCountry ? '1px solid dodgerblue' : '1px solid darkgray',color: isActiveCountry ? 'dodgerblue' : 'black'}"
              id="myCountrys" class="clicks showBtns" @click="changeCountry(0)">{
  { myCountry }}
          </button>
          <button
              :style="{ opacity: isopacityP ? '1' : '0',border: isActiveProvince ? '1px solid dodgerblue' : '1px solid darkgray',color: isActiveProvince ? 'dodgerblue' : 'black'}"
              id="myProvinces" class="clicks" @click="changeProvince(1)">{
  { myProvince }}
          </button>
          <button
              :style="{ opacity: isopacityC ? '1' : '0',border: isActiveCity ? '1px solid dodgerblue' : '1px solid darkgray',color: isActiveCity ? 'dodgerblue' : 'black'}"
              id="myCitys" class="clicks secondShow" @click="changeCity(2)" style="margin-right: 14%;">{
  { myCity }}
          </button>
        </view>
        <scroll-view id="my" :scroll-top="scTop" scroll-y="true" style=" height:400px;width: 100%;"
                     @scroll="handleScroll">


          <view  v-for="(item, index) in currentItemss" class="item" :key="index" :class="{ 'active': isActive(index) } "
               
                >
            {
  { item }}
          </view>
        </scroll-view>
        <!-- <button @click="hideModal">关闭</button> -->
        <view id="psd"></view>
      </view>
    </view>
  </view>
</template>

<script>
import countryData from 'data/countryData.js';
import _ from 'lodash';

export default {
  data() {
    return {
		fg:true,
      isActiveProvince: false,
      isopacityP: true,
      isopacityC: false,
      isActiveCity: false,
      isActiveCountry: true,
      activeIndex: 3, // 当前激活的列表项索引
      itemHeight: 50, // 假设每个列表项的高度是50  
      keyWord: "",
      isModalVisible: false,
      countryDataList: [
        [],
        [],
        []
      ],
      countryNum: 3,
      proviceNum: 0,
      cityNum: 0,
      types: 0,
      myCountry: "中国大陆",
      myProvince: "请选择",
      myCity: "请选择",
      currentListIndex: 0, // 当前显示的列表索引  
      selectedItem: null,
      oldpcountryDataList: countryData.data, // 假设countryData.data是一个包含国家、省份、城市的数组  
      currentItemss: ["请选择"],
      myProvinces: "",
      scTop: 0,
      scrollTimeout: null,
      flags: 0,//从国家到省份1，从省份到市2，从省份到国家3，从市到国家4，从市到省5，,
      pcount: 0,
      scropps: 0,
	  timer:null,
    };
  },

  methods: {
    originalScrollHandler(e) {
      
      if (this.types == 0) {
        //从国家到省份1，从省份到市2，从省份到国家3，从市到国家4，从市到省5，
        if (this.flags == 3) {

          this.activeIndex = this.coun