weui picker实现

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 3.9k累计阅读 4k平均单平台已同步平台 CSDN 微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄11年

关注

原创最新推荐文章于 2024-10-18 20:38:46 发布 3.9k 阅读 AI 写同款· GEO 优化 ›

限时加码！20+主流AI编程工具免费用购周边加赠Coding Plan Lite，Claude Code、Cursor等即刻畅享，学习进阶更高效！阅读详情

在head中引入css文件： <link rel="stylesheet" href="./style/weui.css"/> #注意修改为自己的路径

在底部引入js文件：<script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>

在html中写入

<div>
    <a class="weui-cell weui-cell_access js_item" data-id="picker" href="javascript:;">  
      <div class="weui-cell__bd">
         <p>Picker</p>
      </div>
      <div class="weui-cell__ft"></div>
    </a>
</div>

#与自己在html中定义的元素id对应例如我的示例data-id 为picker

$('#picker').on('click', function () {
    weui.picker([{
        label: '飞机票',
        value: 0
    }, {
        label: '火车票',
        value: 1
    }, {
        label: '的士票',
        value: 2
    },{
        label: '公交票 (disabled)',
        disabled: true,
        value: 3
    }, {
        label: '其他',
        value: 4
    }], {
        onChange: function (result) {
            console.log(result);
        },
        onConfirm: function (result) {
            console.log(result);
        },
        title: '单列选择器'
    });
});

收录于

微信公众号

当前文章被收录于：

微信公众号

5 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

标签

#weui #picker #微信公众号

weui之Picker的使用，分别获取label和value 1.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WeUI</title>  <meta name="viewport" content= 阅读详情

相关推荐

weui picker 修改默认行高rowHeight（weui.js v1.0.0）

需求背景移动端H5项目，需要做省市区三级联动选择框，如下图：于是选择了weui库中的Picker组件原始需求与默认Picker组件UI不一致 UI图中的选择框每行高度与weui picker默认的每行高度不一致。于是想要改变picker组件的rowHeight高度。在picker api中并没有提供设置rowHeight参数的接口。于是只能把源库下载到本地进行修改。修改picker 默认的每行高度rowHeight 想要修改选择框每行高度，要从两方面考虑： 1、CSS修改 // 修改选框的高度，

娃哈哈_的博客 1742

weui.js中的picker自定义实现移动端联动

实现weui中的picker联动，效果图如下：代码如下 <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport...

chelflan's blog 3601

【数据分析/商业分析】面试题整理——SQL专题

数据分析\商业分析—面试题整理自己总结的SQL类的面试题文章目录数据分析\商业分析—面试题整理1.新增用户2.活跃用户数量3.连续登录4.次（n）日留存5.每个科目下分数最高的两名学生

awater_17的博客 1836

weui之Picker的使用教程

这个问题调试了很久，因为调用example.js时没问题，一移开就失效，一度觉得很诡异。经过多次测试，才发现，是zepto.min.js的次序放错了，应该放到头部。完整的代码： WeUI 单列选择器 $('#showPicker').on('click', function

gdali的专栏 5万+

转载：WeUI Picker组件--源码分析

原文链接：WeUI Picker组件源代码分析https://www.cnblogs.com/haha1212/p/8393243.html 前言：由于最近做的一个移动端项目需要用到类似WeUI Picker组件的选择效果，所以下面来分析下WeUI Picker的实现逻辑。（weui.js项目地址）之前也做过类似的组件，是基于iscroll实现的。单列滑动的效果还可以。至于多列联动，数据结构整的太乱了，不太好扩展。项目结构：大家通过上面weui.js的项目地址去下载到本地，打开之...

qq_26780317的博客 1347

weui之Picker的使用-动态赋值

qq_35410775的博客 2538

在vue中实现picker样式_vue中怎么用weui的picker？

vue.js里想用weui的picker，也引入了weui.js，为什么报错weui is not defined？import weuiJs from '../weui-js/weui.js'export default {methods: {checkPicker: function () {weui.picker([{label: '飞机票',value: 0}, {label: '火车票'...

weixin_39980809的博客 663

weui.js中的picker自定义实现移动端三级联动、多级联动（省市区联动）

weui中的picker默认组件只有两个，一个默认的picker，只有一级可选项，一个datePicker可以实现年月日联动，但是好多自定义场景需要自定义多级联动。如时间2019-01-01 12:00:00这种N级联动或者省市区三级联动。此处以省市区三级联动为例。 html代码： <!DOCTYPE html> <html> <head&gt...

mofeimo110的博客 1万+

jquery-weui扩展功能Picker实现营业时间选择

说明主要利用jquery-weui插件，实现店铺营业时间点选，功能已经做好了时间格式校验，开始时间与结束时间比较。技术 jquery-weui jquery.min.js css只用到了Picker部分的css 实现引入jquery手册，引入jquery-weui.js,在我的源码中一定要引入base.css中必要的weui中的样式，之后上代码实现过程 html文件 <body&...

weixin_45947191的博客 1379

Vscode+Pycharm+Vue.js+WEUI+django火锅(7）傍着Copliot战WEUI Picker

在这个示例中，selectedOption 和 selectedOptionLabel 分别绑定到 Picker 和输入控件。通过 v-model 实现双向绑定，当用户选择 Picker 选项时，输入控件的值也会相应更新。这个示例展示了如何在 Vue 项目中使用 vue-weui 库来实现一个简单的 Picker 组件。你可以通过 v-model 实现 Picker 和输入控件的双向绑定。你可以使用 vue-weui 库来实现 WeUI 样式的 Picker 组件。label: '选项1',

清风弄影 1244

jquery-weui picker组件实现只选择年月

　　　　var date = new Date() var month = date.getMonth()+1　　//获取当前月份 $('#selectTime').picker({ toolbarTemplate:'<div class="toolbar"><div class="toolbar-inner">&...

weixin_30328063的博客 1160

微信网页之weui——微信样式控件

今天问卷做完，结果经理说样式要和微信小程序的一样，我用原生的select默认样式和微信的完全不一样，故此采用weui，在用weui之前要导入所需要的文件  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.css"/>

Willow_Spring的博客 1573

weui.js将select变为weui.picker显示

在weui的展示界面，有一个挺不错的picker模拟select的演示，但是我读了一遍weui.js的文档，却发现没有将select转为picker的这一过程封装，所以只好造了一个轮子，同时也上传到了github:weui.js-select2Picker (() => { if (!weui || !$) return; weui.select2Pick...

mofeimo110的博客 1237

weui的使用方法

Lyc1cccccccc的博客 3789

Jquery weui picker 支持label和value

万年没更新了. 最近用jquery weui. 在使用picker时需要一些问题. 就是让picker 显示label, 但是取值的时候取value用于存储. 官网例子如下 Jquery-weui 官网 :点这里写这篇文章时，用的版本是1.2.1版本 $("#picker-name").picker({ title: "请选择您的称呼", cols: [ { ...

weixin_30563319的博客 1449

weui-picker蒙层问题

weui-picker蒙层问题问题描述：点击选择框以外的地方不关闭select，并且无阴影解决方法：在css加一行代码： .weui-animate-fade-in { visibility: unset !important; }

Is_ayanya的博客 552

weui省市区三级联动

qq_41045116的博客 696

获得picker选项的当前年月值_weui 用picker自定义年月日时分秒（一个弹框）

需求：h5页面做成移动端需要年月份时分秒得弹框方法：用weui得picker自定义年月日时分秒不足：上下选择月份的时候，日期不能根据月份调整成该月该有得天数，因为统一给了31天，我也做了闰年得判断，但是发现只有打开得当月才有判断，比如4月份判断了只有30天，如果4月份想选择3月份得31号，发现没有这一天代码：isWhichTime:function (timeSelector) { let...

weixin_39922683的博客 292

【JavaWeb】jQuery WeUI框架地址选择器 City-Picker 自定义demo

jQuery WeUI City-Picker Demo：http://www.jqweui.cn/extends#city-picker 官方的city-picker提供了两种样式：（1）省级-市级-区级（2）省级-市级（不显示区级）最近开发的应用有一个新的需求，由于是在湖北省内使用，要求不显示“湖北省”，选择市级-区级，而且地址名称可自定义。 city-picker.js 里有按JSON组织的 rawCitiesData ，例如“湖北省-武汉市-武昌区”的组织结构如下所示。

coralime的博客 3354

weui两级联动，省市两级联动处理逻辑总结

问题：用weui做省市级联动，只涉及两级联动，采用的weui官方的picker组件，开始就是联动不起来，各种纠结，网上也没有找到答案，卡了一天，现在总结下逻辑。解答：采用weui官方的级联picker，注意是级联picker，不是多列，也不是单列。效果图：处理逻辑：将后台请求的数据，拼接成weui官方给出的级联pick数据模型级联pick数据模型: // 级联pic...

Haines 4016

上一篇： django新手图文入门教程

下一篇： python 微信公众号access_token的获取

weui picker 修改默认行高rowHeight（weui.js v1.0.0）

娃哈哈_的博客

07-12

1742