基于better-scroll实现的类似ios选择器

最新推荐文章于 2023-04-07 20:25:56 发布
最新推荐文章于 2023-04-07 20:25:56 发布
阅读量347 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5cda16b3f265da03ae74e3bc
版权

水平较低，主要是给自己看的。如果要用vue transition,必须每次弹出都初始化better-scroll实例。

<!--
li下必须加子元素包裹，否则选中样式会有延迟。
目前是在任何一列在滚动中都会禁用取消和确认，实际上可以使用stop()方法，不过需要下次弹出前想办法初始化
$data.show控制弹出和收起
$props.type: 场景类型
  1.YMD——年月日，默认initYMD是当前年月日，否则传入new Date(yyyy,mm,dd),注意mm为0-11
  2.SHX——省市区、三级联动，目前没做初始位置逻辑。由于地区名字可能会很长，由filter做了一些不恰当处理
-->
<template>
  <div class="selector">
    <div v-show="show" class="shade"></div>
    <div class="box" :class="{'up':show,'down':!show}">
      <div class="title">
        <button type="button" @click="cancel" :disabled="disableBtn">{{lb}}</button>
        <div>{{title}}</div>
        <button type="button" @click="deal" :disabled="disableBtn">{{rb}}</button>
      </div>
      <div class="section">
        <div class="line"></div>
        <div class="line"></div>
        <!--数据没有关联性的年月日-->
        <div class="lists three" v-if="type==='YMD'">
          <div class="wrapper" ref="first">
            <ul ref="firstUl">
              <li v-for="(v,i) in firstList" :key="i">
                <p :class="getClass(firstIndex, i)">{{v}}</p>
              </li>
            </ul>
          </div>
          <div class="wrapper" ref="second">
            <ul ref="secondUl">
              <li v-for="(v,i) in secondList" :key="i" :ref="i===0?'cell':null">
                <p :class="getClass(secondIndex, i)">{{v}}</p>
              </li>
            </ul>
          </div>
          <div class="wrapper" ref="third">
            <ul ref="thirdUl" class="wheel-scroll">
              <li v-for="(v,i) in thirdList" :key="i" class="wheel-item">
                <p :class="getClass(thirdIndex, i)">{{v}}</p>
              </li>
            </ul>
          </div>
        </div>
        <!--省市县三级联动-->
        <div class="lists threeLink" v-if="type==='SHX'">
          <div class="wrapper" ref="first">
            <ul ref="firstUl" class="wheel-scroll">
              <li v-for="(v,i) in firstList" :key="i" class="wheel-item">
                <p :class="getClass(firstIndex, i)">{{v.name | reduceLetter}}</p>
              </li>
            </ul>
          </div>
          <div class="wrapper" ref="second">
            <ul ref="secondUl">
              <li v-for="(v,i) in secondList" :key="i" :ref="i===0?'cell':null">
                <p :class="getClass(secondIndex, i)">{{v.name | reduceLetter}}</p>
              </li>
            </ul>
          </div>
          <div class="wrapper" ref="third">
            <ul ref="thirdUl">
              <li v-for="(v,i) in thirdList" :key="i">
                <p :class="getClass(thirdIndex, i)">{{v.name | reduceLetter}}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll';
import SHX from 'ass/js/ChinaAreaList';

export default {
  name: 'Selector',
  data() {
    return {
      show: false,
      firstScroll: Function, // 第一列better-scroll对象
      secondScroll: Function,
      thirdScroll: Function,
      firstIndex: 0, // 第一列选中索引
      secondIndex: 0,
      thirdIndex: 0,
      firstList: null, // 第一列数据
      secondList: null,
      thirdList: null,
      lastDate: Date,
      ymdList: Array,
      firstScrolling: false,
      secondScrolling: false,
      thirdScrolling: false
    }
  },
  props: {
    type: {
      type: String,
      default: 'YMD'
    },
    config: {
      type: Object
    },
    lb: {
      type: String,
      default: '取消'
    },
    rb: {
      type: String,
      default: '确认'
    },
    title: {
      type: String,
      default: '日期选择'
    },
    initYMD: { // 初始时间年月日
      type: Date,
      default() {
        return new Date();
      }
    },
    initSHX: {
      type: Array,
      default() {
        return ['110000', '110000'];
      }
    },
    output: null // 输出对象
  },
  computed: {
    disableBtn() {
      if (!this.thirdScrolling && !this.secondScrolling && !this.firstScrolling) {
        return false;
      } else {
        return true;
      }
    }
  },
  filters: {
      reduceLetter(v) {
         const reg = /(省|市|县|自治区|特别行政区|壮族|回族|藏族|土族|维吾尔|自治县|自治州|蒙古族|自治)/g;
         return v.replace(reg, '');
      }
  },
  methods: {
    getYears(len, init) {
      return Array.from({length: len}).map((v, i) => i + init);
    },
    getMonth() {
      return Array.from({length: 12}).map((v, i) => i + 1);
    },
    createYMD(start, lang) { // start开始年份，lang展示
      const d31 = /^(0|2|4|6|7|9|11)$/;
      const d30 = /^(3|5|8|10)$/;
      return Array.from({length: lang}).map((yv, yi) => {
        yv = {};
        yv['year'] = yi + start;
        yv['first'] = Array.from({length: 12}).map((mv, mi) => {
          let len;
          mv = {};
          if (yv.year % 4 === 0 && mi === 1) {
            len = 29;
          } else if (yv.year % 4 !== 0 && mi === 1) {
            len = 28;
          } else if (d30.test(mi)) {
            len = 30;
          } else if (d31.test(mi)) {
            len = 31;
          }
          mv['month'] = mi + 1;
          mv['second'] = Array.from({length: len}).map((dv, di) => {
            dv = di + 1;
            return dv;
          });
          return mv;
        });
        return yv;
      });
    },
    getDate(y, m) {
      let len = 28;
      const d31 = /^(0|2|4|6|7|9|11)$/;
      const d30 = /^(3|5|8|10)$/;
      let year = y || this.initYMD.getFullYear();
      let mon = m || this.initYMD.getMonth();
      if (d31.test(mon)) {
        len = 31;
      } else if (d30.test(mon)) {
        len = 30;
      } else if (mon === 1 && year % 4 === 0) {
        len = 29;
      }
      return Array.from({length: len}).map((v, i) => i + 1);
    },
    getClass(index, key) {
      if ((key === index - 1) || (key === index + 1)) {
        return 'second';
      } else if (key !== index) {
        return 'third';
      }
    },
    initListYMD() {
      let time;
      switch (this.type) {
        case 'MD':
          time = this.initYMD;
          break;
        default:
          time = this.initYMD;
          this.firstList = this.getYears(300, 1900);
          this.secondList = this.getMonth();
          this.thirdList = this.getDate();
          this.firstIndex = time.getFullYear() - 1900;
          this.secondIndex = time.getMonth();
          this.thirdIndex = time.getDate() -1;
          break;
      }
    },
    initScroll(scroll) {
      this.$nextTick(() => {
        if (!this.$refs[scroll]) return;
        this[scroll + 'Scroll'] = new BScroll(this.$refs[scroll], {
          probeType: 3,
          wheel: {
            selectedIndex: this[scroll + 'Index']||0,
            wheelWrapperClass: 'wheel-scroll',
            wheelItemClass: 'wheel-item',
            rotate: 0,
            adjustTime: 0
          }
        });
        const ch = this.$refs.cell[0].clientHeight;
        this[scroll + 'Scroll'].on('scroll', ({y}) => {
          this[scroll + 'Index'] = Math.round(Math.abs(y) / ch);
          this[scroll + 'Scrolling'] = true;
        });
        this[scroll + 'Scroll'].on('scrollEnd', () => {
          this[scroll + 'Scrolling'] = false;
          this[scroll + 'Index'] = this[scroll + 'Scroll'].getSelectedIndex();
          if (this.type === 'YMD' && (scroll === 'first' || scroll === 'second')) {
            let len1 = this.thirdList.length;
            this.thirdList = this.getDate(this.firstIndex + 1900, this.secondIndex);
            let len2 = this.thirdList.length;
            if (len1 === len2) return;
            this.thirdScroll.refresh();
            this.thirdIndex = 0;
            this.thirdScroll.scrollTo(0, 0, 300); // 注意：最顶端是0，往下的坐标是负的，时间单位ms
          }
          if (this.type === 'SHX') {
              if (scroll === 'first') {
                  this.secondIndex = 0;
                  this.secondList = this.firstList[this.firstIndex].cityList;
                  this.secondScroll.scrollTo(0, 0, 300);
                  this.thirdIndex = 0;
                  this.thirdList = this.secondList[this.secondIndex].areaList;
                  this.thirdScroll.scrollTo(0, 0, 300);
              }
              if (scroll === 'second') {
                  this.thirdIndex = 0;
                  this.thirdList = this.secondList[this.secondIndex].areaList;
                  this.thirdScroll.scrollTo(0, 0, 300);
              }
          }
        });
      });
    },
    cancel() {
      this.show = false;
      this.$emit('cancel',this.lastDate);
    },
    deal() {
      this.show = false;
      if (this.type === 'YMD') {
        let date = `${this.firstList[this.firstIndex]}-${this.secondList[this.secondIndex]}-${this.thirdList[this.thirdIndex]}`;
        this.$emit('update:output',date);
      } else if (this.type === 'SHX') {
        let arr = [
          {
            code: this.firstList[this.firstIndex].code,
            name: this.firstList[this.firstIndex].name
          },
          {
            code: this.secondList[this.secondIndex].code,
            name: this.secondList[this.secondIndex].name
          },
          this.thirdList[this.thirdIndex]
        ];
        this.$emit('update:output',arr);
      }
    }
  },
  created() {
    console.error('', this);
    switch (this.type) {
      case 'SHX':
        this.firstList = SHX;
        this.secondList = this.firstList[0].cityList;
        this.thirdList = this.secondList[0].areaList;
        break;
      default:
        this.initListYMD();
        this.lastDate = this.initYMD;
    }
    this.initScroll('first');
    this.initScroll('second');
    this.initScroll('third');
    this.ymdList = this.createYMD(1900, 300);
  }
}
</script>

<style scoped lang="less">
  @import "~ass/style/base.less";
  .selector{
    .shade {
      height: 100%;
      width: 100%;
      background: #333;
      opacity: 0.5;
      position: fixed;
      top: 0;
      left: 0;
      z-index:9;
    }
    .box{
      height: 491*@rpx;
      width: 750*@rpx;
      position: absolute;
      bottom: -500*@rpx;
      z-index: 10;
      font-size: 32*@rpx;
      background: @cff;
      display: flex;
      flex-direction: column;
      .title{
        height: 88*@rpx;
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid @ce5;
        div{
          line-height: 88*@rpx;
        }
        button{
          padding: 0 42*@rpx;
          color:@c80;
        }
        button:last-of-type{
          color:@c10;
        }
      }
      .section{
        width: 100%;
        flex:1;
        padding: 0 40*@rpx;
        position: relative;
        .wrapper{
          padding: 160*@rpx 0;
          height: 402*@rpx;
          overflow: hidden;
          ul{
            li{
              p{
                height: 100%;
                width: 100%;
                line-height: 80*@rpx;
                text-align: center;
                font-size: 40*@rpx;
                white-space:nowrap;
                overflow: hidden;
                pointer-events: none;
              }
              .second{
                color: @c99;
                font-size: 36*@rpx;
              }
              .third{
                color: @ccc;
                font-size: 32*@rpx;
              }
            }
          }
        }
        .lists{
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
        .three{
          padding: 0 40*@rpx 0 80*@rpx;
          li{
            width: 126*@rpx;
          }
        }
        .threeLink{
          li{
            width: 220*@rpx;
            overflow: hidden;
          }
        }
        .line{
          width: 670*@rpx;
          height: 0;
          border-bottom: 1px solid @ccc;
          position: absolute;
          top: 160*@rpx;
        }
        .line:nth-of-type(2){
          top: 240*@rpx;
        }
      }
    }
    .up{
      transform: translateY(-500*@rpx);
      transition: transform .3s ease-in-out;
    }
    .down{
      transform: translateY(500*@rpx);
      transition: transform .3s ease-in-out;
    }
  }
</style>


复制代码
<!--HTML font-size，rem-->
    var htmlFontSize = document.documentElement.clientWidth / 375 * 100 + 'px';
    var bodyFontSize = '16px';
    var styleDom = document.createElement('style');
    styleDom.innerHTML = 'html{font-size:' + htmlFontSize + '!important;}body{font-size:' + bodyFontSize + '!important;}';
    document.getElementsByTagName('head')[0].appendChild(styleDom)
复制代码
<!--SHX格式-->
[{
    "code": "820000",
    "name": "澳门特别行政区",
    "cityList": [
      {
        "code": "820000",
        "name": "澳门特别行政区",
        "areaList": [
          {
            "code": "820000",
            "name": "澳门特别行政区"
          }
        ]
      }
    ]
  }]
复制代码

转载于:https://juejin.im/post/5cda16b3f265da03ae74e3bc

weixin_33923762
关注
iOS 键盘难题与可见视口（VisualViewport）API
Jack, what else can you do besides holding your little darling?
11-02 561
Web 开发者与 iOS 长达四年的较量，终于在 iOS 13 发布这一刻落下帷幕。 iOS 8.2 和它的键盘难题 2015 年三月，iOS 发布了 8.2 版本。这在当时看来也许只是这个现代的操作系统的一次小更新，但在 Web 开发者眼里，有些微妙的问题产生了。这是一件在 Android 世界里想象不到的麻烦事儿。 在此之前 Web 开发者都非常清楚，在window全局对象上的innerWidth/innerHeight表示浏览器窗口中可以看到页面的区域的尺寸，而outerWidth...
史上最全wireshark使用教程，8万字整理总结，建议先收藏再耐心研读
孙叫兽的博客
07-14 3万+
目录 第1章介绍... 1 1.1.什么是Wireshark. 1 1.1.1.主要应用... 1 1.1.2.特性... 1 1.1.3.捕捉多种网络接口... 2 1.1.4.支持多种其它程序捕捉的文件... 2 1.1.5.支持多格式输出... 2 1.1.6.对多种协议解码提供支持... 2 1.1.7.开源软件... 2 1.1.8.Wireshark不能做的事... 2 1.2.系通需求... 2 1.2.1.一般说明... 2 ...
better-scroll 详解
热门推荐
爱睡的虫虫
05-26 3万+
better-scroll 是什么 better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。 better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，zip 后仅有9kb，是一款非常轻量的 JS lib。 怎么使用 better-scroll 结构 例：常见的列表滚动 <div class=...
（better-scorll）类似与滚动条的插件
dengmen1396的博客
01-21 422
1.安装插件包 npm i better-scroll 2.在所需要的组建中引入better-scroll import Bscroll from "better-scroll"; 3.在页面渲染完毕后调用插件 mounted () { this.scroll = new Bscroll(this.$refs.ratter); //传递需要功能...
Better-Scroll
黎小小的博客
09-19 603
1.Better-Scroll better-scroll是一款重点解决移动端（现已支持PC端）各种滚动场景需求的插件。它的核心是借鉴的iscroll的实现，它的API设计基本兼容iscroll，在iscroll的基础上又扩展了一些特征以及做了一些性能优化。 better-scroll是基于原生JS实现的，不依赖任何框架。 手册地址：http://ustbhuan...
better-scroll
liux6687的博客
09-30 228
&lt;template&gt;     &lt;div class="wrapper" ref="wrapper"&gt;         &lt;ul class="container"&gt;                &lt;li v-for="item in 1000"&gt;{{item}}&lt;/li&gt;         &a
Ionic日期选择插件
07-04
首先，我们要理解的是 Ionic 的 UI 组件库并未内置一个完整的日期选择器，因此开发者通常需要借助第三方插件来实现这一功能。在案例中提到的"Ionic日期选择插件"可能是由 gocaizi 开发并经过改进的一个解决方案。在...
iOS 强大第三方资源库
weixin_34237596的博客
03-08 1万+
Github用法 git-recipesGit recipes in Chinese. 高质量的Git中文教程. lark怎样在Github上面贡献代码 my-git有关 git 的学习资料 gitignore非常赞 有用的.gitignore模板集合(忽略上传的文件集合)，包含了各种语言. 完整App@ open-source-ios-apps- iOS开源App集合，分：swift与Objec...
Vue实现饿了么外卖APP（部分）-笔记
wuzhaoqing325的博客
12-06 863
1.需求分析 2.图标字体 1.用icomoon生成图标字体，下载并解压 2. .eot,.svg,ttf,woff文件放在fonts目录下，style.css文件放在stylus目录下 3. 将stylus目录下的stye.css文件改名字，修改路径，删除{}，；等，使其符合stylus语法规范 3.后台数据 最新的vue.js没有dev-server.js文件，如何进行后台数据模拟？ 1.在w...
使用scrollTop(）解决IOS中输入法遮挡输入框问题
08-29
ios浏览器上输入法会弹出遮挡输入框问题，下面小编给大家分享scrollTop(）解决IOS中输入法遮挡输入框问题，一起看看吧
Vue中的better-scroll
qq_45954420的博客
03-07 2281
什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 安装 npm install better-scroll -S # 安装带有所有插件的 BetterScroll npm install @better-scroll/core # 核心滚动，大部分情况可能只需要一个简单的滚动
滚动插件【better-scroll】
aoteman_web的博客
12-03 927
使用better-scroll实现界面滚动效果
better-scroll 是什么
最新发布
nie_020920的博客
04-07 266
不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理： 浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值