移动端弹窗插件mobileSelect的使用，送上全国城市的json

最新推荐文章于 2024-08-08 07:24:46 发布

爱唱歌的前端

最新推荐文章于 2024-08-08 07:24:46 发布

阅读量2.3k

点赞数 2

分类专栏：大前端文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_42063951/article/details/104413222

版权

大前端专栏收录该内容

13 篇文章 2 订阅

订阅专栏

用过很多移动端弹窗插件，但还是觉得mobileSelect好用，样式好看，过度动画也很棒，所以推荐给写移动端的小伙伴们。

点击查看jQuery插件库的演示Demo

点击查看jQuery插件库的说明和文件下载

点击查看在GitHub上的项目

使用方法

GitHub上下载项目
在这里插入图片描述

下载完解压后分别把css文件夹、js文件夹的mobileSelect.css和mobileSelect.js提取出来翻到你的项目中，我这里以test文件夹为例项目，文件就不分别放css文件夹和js文件夹里了，方便演示。

在这里插入图片描述
然后用你的编辑器打开项目，推荐使用vsCode，新建HTML文件，用vsCode的话输入！感叹号后回车键就可以快速生成HTML模板了，很方便。

头部引入mobileSelect.css和mobileSelect.js文件

然后就可以直接使用刚刚下载mobileSelect项目的demo.html文件里面的5种弹窗了，
在这里插入图片描述
这里我们以单项选择弹窗为例，我把单项选择弹窗要用到的代码都拷到了我新建的文件夹先，为了好看一点我加了点css样式，为了方便，css样式就不分到新的文件下了。body里面写了个按钮用于显示弹窗。接下来看js部分，代码先是实例化了一个叫MobileSelect（）对象，里面的参数就是我们要操作的地方啦。

trigger：	用于绑定ID的dom操作，我试了下用类名也是可以的但要把#键改成点 ‘.’
title：	标题可以不写
wheels：	里面的data传的是一个数组
position：	是弹窗显示时的默认位置，比如值是2，那么默认显示的就是数组下标2的值
transitionEnd函数：	是滚动停止后选的值
callback函数：	是点击确认后返回的值

整个HMTL代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="mobileSelect.css">
    <script src="./mobileSelect.js"></script>
</head>
<style>
    main {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn {
        background-color: aqua;
        color: white;
        padding: 10px 20px;
    }
</style>

<body>
    <header></header>
    <main>
        <div id="btn" class="btn">点击显示弹窗</div>
    </main>
    <footer></footer>
</body>
<script>
    var weekdayArr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    var mobileSelect1 = new MobileSelect({
        trigger: '#btn',
        title: '单项选择',
        wheels: [
            { data: weekdayArr }
        ],
        position: [2], //初始化定位 打开时默认选中的哪个 如果不填默认为0
        transitionEnd: function (indexArr, data) {
            //console.log(data);
        },
        callback: function (indexArr, data) {
            console.log(data);
        }
    });
</script>

</html>

项目效果
我已经把确定按钮改成微信绿了，需要修改的话把mobileSelect.css的.ensure参数改下就好了
在这里插入图片描述

全国城市的json：

如果你写过小程序你应该会知道，在处理选择省市区弹窗时用官方封装好的组件picker就可以实现了，然而在写移动端时就头疼了，网上找到的省市区选择器不美观，自己写一个不太现实，时间也不允许，所以我用mobileSelect+手写city.json来实现（并非全部手写的，在网上找了份，但发现好多城市都不齐，于是忍痛按照小程序弹窗给补上了，弄完后不得不赞叹我国之大TAT），效果看下边GIF，还不错，分享给大家。

项目效果
在这里插入图片描述

使用方法

点击CSDN下载地址

点击百度网盘下载地址（提取码：3w65）

依旧以文章开头的项目为例，把下载好的city.json放到你的项目中
在这里插入图片描述
然后用编辑器打开city.json可以看到里面有一个对象

然后为了方便在HTML中引入了百度线上的jquery文件，用jquery的ajax请求本地的city.json文件，成功后赋值给插件，当然用原生JS请求也是没问题的。（注意：为了好看我把ajax请求设置为了同步请求，数据放到了外边；要用异步的话吧async改为true，把mobileSelect1对象放到success方法里就好了）
在这里插入图片描述
整个HMTL代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="mobileSelect.css">
    <script src="./mobileSelect.js"></script>
</head>
<style>
    main {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn {
        background-color: aqua;
        color: white;
        padding: 10px 20px;
    }
</style>

<body>
    <header></header>
    <main>
        <div id="btn" class="btn">点击显示弹窗</div>
    </main>
    <footer></footer>
</body>
<!-- 百度 CDN: -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    // 获取本地城市Json
    var cityObj = new Object;
    $.ajax({
        url: "./city.json",//json文件位置，文件名
        type: "GET",//请求方式为get
        dataType: "json", //返回数据格式为json
        async: false,
        success: function (res) {
            //请求成功完成后要执行的方法 
            // console.log(res)
            cityObj = res;
        }
    })
    console.log(cityObj)
    var mobileSelect1 = new MobileSelect({
        trigger: '#btn',
        title: '',
        wheels: [
            { data: cityObj }
        ],
        position: [0,0,0], //初始化定位 打开时默认选中的位置 如果不填默认为0
        transitionEnd: function (indexArr, data) {
            console.log(data);
        },
        callback: function (indexArr, data) {
            console.log(data);
        }
    });
</script>

</html>