ToB企服应用市场:ToB评测及商务社交产业平台

标题: H5利用iosselect实现一级、二级下拉，利用jq大概vue [打印本页]
作者: 金歌    时间: 2024-10-23 05:00
标题: H5利用iosselect实现一级、二级下拉，利用jq大概vue
文档和demo可以访问 https://github.com/zhoushengmufc/iosselect/ 
利用 iosselect 需要下载iosSelect.css 和iosSelect.js 绑定资源里有可以直接拿大概也可以去文档demo的代码里找文件
先说通过jq实现，直接引入文件，注意引入路径
  2. <link href="css/iosSelect.css" type="text/css" rel="stylesheet">   
  3. <script src="js/iosSelect.js"></script>
  4. <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
复制代码
html部分直接利用就可，一样平常都是通过input标签来触发，不过在H5里有时候会有安卓、ios兼容问题，以是这里实现通过点击p标签来触发选择变乱。
  1. <p class="text_inp p_select" name="shopType" id="shopType" onclick="showli()">请选择您的所属地区</p>
  2. <img onclick="showli()" class="text_jtimg" src="img/jt_x.png" alt="">
  4. <script>
  5. function showli() {
  6.   // 通俗理解 这里IosSelect的参数 1 就是一级下拉 后面数组和对象是选择的值
  7.   new IosSelect(1, [[{ "id": "001", "value": "暂无" }]], {
  8.     // 标题
  9.     title: '请选择您的所属地区',
  10.     // 选中的id
  11.     oneLevelId: $("#shopType").attr('data-shopType-code'),
  12.     // 选择完的回调，在这里干活
  13.     callback: function (selectOneObj) {
  14.     // 自定义从哪项开始，可以加个自定义属性：data-shopType-code="开始项的id"
  15.     $("#shopType").attr('data-shopType-code', selectOneObj.id);
  16.     $("#shopType").text(selectOneObj.value);
  17.     $("#shopType").css('color', '#000');
  18.    }
  19. });
  20. }
  21. </script>
复制代码
实现结果：

点击后 --：

至此 jq方法实现结束。
vue 中利用iosselect插件
1. 安装 npm install iosselect
2.页面引入 iosselect 和 iosSelect.css 
（这里css文件直接在main.js中直接引入的）
  1. // 哪个页面用哪个页面引
  2. import IosSelect from "iosselect";
  4. // css放在main.js里引
  5. require('iosselect/src/iosSelect.css')
复制代码
直接开始干活...
一样input大概会有安卓、ios 兼容问题以是也是用p标签来实现触发，
  1. <template>
  2.   <div class="about">
  3.     <h1>iosselect下拉框</h1>
  4.     <p @click="selectClick">{{activityLevel}}</p>
  5.     <p @click="selectClick02">{{activityLevel}}、{{activityLevel02}}</p>
  6.   </div>
  7. </template>
  8. <script>
  9. import IosSelect from "iosselect";
  10. export default {
  11.   data() {
  12.     return {
  13.       activityLevel:'请点击选择',
  14.       activityLevel02:'二级下拉选择'
  15.     }
  16.   },
  17.   methods:{
  18.     selectClick(){
  19.       var that = this
  20.       let sele_Level = [{ "id": "001", "value": "自助餐" }, { "id": "002", "value": "私房菜" }, { "id": "003", "value": "超市" }]
  21.       new IosSelect(1, [sele_Level], {
  22.         title: "请选择就餐模式",
  23.         oneLevelId: '001',
  24.         itemHeight: (document.documentElement.clientWidth / 750) * 100 * 0.75,
  25.         showLoading: true,
  26.         callback(
  27.           selectOneObj,
  28.         ) {
  29.           that.activityLevel = `${selectOneObj.value}`;
  30.         },
  31.       });
  32.     },
  33.     selectClick02(){
  34.       var that = this
  35.       let sele_Level = [{ "id": "001", "value": "自助餐" }, { "id": "002", "value": "私房菜" }, { "id": "003", "value": "超市" }]
  36.       let sele_Level02 = [{ "id": "001", "value": "海鲜" }, { "id": "002", "value": "面条" }, { "id": "003", "value": "超市" }]
  37.       new IosSelect(2, [sele_Level,sele_Level02], {
  38.         title: "请选择就餐模式",
  39.         oneLevelId: '001',
  40.         twoLevelId:'002',
  41.         itemHeight: (document.documentElement.clientWidth / 750) * 100 * 0.75,
  42.         showLoading: true,
  43.         callback(
  44.           selectOneObj,selectTwoObj
  45.         ) {
  46.           that.activityLevel = `${selectOneObj.value}`;
  47.           that.activityLevel02 = `${selectTwoObj.value}`;
  48.         },
  49.       });
  50.     }
  51.   }
  52. }
  53. </script>
复制代码
实现结果：
 
--- 结束。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4