weui picker 遮罩不启用

2024-10-17

Vue使用 weui picker 弹出框不消失

前言最近使用 weui 里面的 datepicker 组件的时候遇到了一个问题: 弹出来选择年月日的框之后,直接点击导航上的“返回” 按钮,picker 选框不消失,也就是弹出框不消失 weui.datePicker({ start: 1900, // 从今天开始 end: 2030, defaultValue: dayArray, //cron: "* * 0,6", // 每逢周日.周六 onChange: function(result) {}, onConfirm: fun

WeUI Picker组件源代码分析

前言由于最近做的一个移动端项目需要使用到类似 WeUI Picker组件的选择效果, 所以在这里来分析下 WeUI Picker 的实现逻辑.(weui.js项目地址) 之前也做过类似的组件, 是基于iscroll实现的.单列滑动的效果还可以.至于多列联动,数据结构整的太乱了, 不太好扩展. 1.项目结构大家通过上面 weui.js 的项目地址去下载到本地, 打开之后找到 src 下面的 picker 就是我们今天要学习的 picker 组件的代码了. 其中picker.js 和 scr

Jquery weui picker 支持label和value

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

WEUI Picker不切换数据

/*js部分,myPicker是设备号input的ID*/ $('#myPicker').change(function () { /*选择设备号后,根据当前设备号设置不同的摄像头选项,具体判断逻辑根据具体的项目而定*/ var val = $("#myPicker").val(); if (val === "*******352") { $("#box").empty(); $("#box").html("<

WeUI移动页面实现时间选择器（年-月-日-时-分）

在做微信公众号的时候,使用的WeUI样式,有一个需求是用户选择一个预约时间,需要年月日并精确到小时和分钟. 但是WeUI的picker组件不支持直接显示5列,根据WeUI.js作者的建议,是将日期和时间选择作为两个选择器来实现. 所以我的实现思路是先选择日期,然后自动跳出时间选择,来模仿一个时间选择器.日期属于datepicker,时间属于普通的picker. 效果图: 点击期望时间跳出datepicker: 在选择时间并确定后跳出时间选择,这是一个普通picker: 之后就可以对选择的时间做处

前端 pickerview 的效果实现省市区三级联动

效果图需要引入大佬写的js 以及 css 源文件里面有大佬的地址这是我存在gitee上的文件 https://gitee.com/depressiom/address-pickview-effect.git <div class="weui-cells" style="margin: 0px;line-height: 60px;"> <div class="weui-cell weui-cell_select weui-cell_s

weui中的picker使用js进行动态绑定数据

解决方案; picker和Select组件是通过input标签绑定,可以先通过input的父级元素移除input标签,重新插入input标签,最后重新初始化picker或Select组件. <div class="weui-cell"> <div class="weui-cell__hd"><label for="time-format" class="weui-label">性别</

weui中的picker滑动报错

html { touch-action: none; } 在页面插入上述代码即可解决

WEUI控件JS用法

/* dialog */ document.querySelector('#alertBtn').addEventListener('click', function () { _weui2.default.alert('自定义标题的alert', function () { console.log('ok'); }, { title: '自定义标题' }); }); /* confirm */ document.querySelector('#confirmBtn').addEventList

周记7——ios中picker滑动穿透bug

Bug描述:使用mint-ui的picker组件时,datepicker和picker在ios的webview(bug是在Hybrid App发现的)中会出现滑动穿透的现象,导致弹层后面的页面也会滚动,这使得用户体验很不好. 方案1:由于picker组件的滚动是用touch事件 + translate实现的,所以,我们可以在picker弹层出现的时候禁止页面的默认滚动机制,picker弹层消失的时候解除禁用页面的默认滚动机制. data () { return { /*---------监听函数

微信WeUI扩展组件

主要包括下拉刷新pullToRefresh downRefresh.html 主要的代码是$(document.body).pullToRefresh(); <div class="weui-pull-to-refresh__layer"> <div class='weui-pull-to-refresh__arrow'></div> <div class='weui-pull-to-refresh__preloader'></d

微信WeUI入门2

引入需要的样式文件最重要的css文件为 weui.min.css 基本的框架如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0&qu

Weui 文件上传完整版示例

部分思路借用网友,部分是自己细化的. 先声明. 不多说,参考代码 @{ ViewBag.Title = "费用填报"; Layout = "~/Views/Shared/_MForm.cshtml"; } <html > <head> <meta name="viewport" content="width=device-width" /> </head> <body on

微信小程序——weui的使用

使用在根目录中复制weui.wxss,app.wxss中引入在weui.io中查看到自己想要的样式表后,到第二个网站复制代码,复制到自己的项目中即可 <view class="container"> <view class="page__hd"> <view class="page__title">学生用户注册</vie

jQuery weui Select组件显示指定值

jQuery weui有个支持单选或者多选的select弹出层,默认他是这样的第2部分选择什么值,第1部分就显示什么值,一般的场景支持是没问题了,但本次开发碰到了一个问题. 需求描述: 职业名称后面要显示一些描述,如“法官 2个案件在审理”,“医生正在做手术”,同时要求点击对应项时,只显示“法官”,“医生”而不显示剩余的描述,根据select现有的逻辑是无法实现这个功能的.只能实现选项是什么,显示的值就是什么,不明白,看下图解决方案: 查看官方文档,数据通过title和value进行控制,

WeUI教程/第三方扩展及其他UI框架对比

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.包含button.cell.dialog. progress. toast.article.actionsheet.icon等各式元素.WeUI 为微信 Web 服务量身设计的h5框架.严格的讲它是一个css库.算一个精简的库,它是使用less编写,最终编译成css,压缩成weui.min.css WeUI使用方法 WeUI 是一套与微信原生 UI 一致的 UI 库,

微信小程序 — 自定义picker选择器弹窗内容+textarea穿透bug

微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都只有定死的样式和内容. 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: 代码如下: <view class="free-btns" style="margin-top: 10vh;background:none;"> <button class="free-btn" bindtap="toggleDialog&

WeUI基础样式库——写一个移动端界面

WeUI是一套基础样式库,同微信原生视觉体验一致,由微信官方设计团队为微信内网页和微信小程序量身设计的.我们来看看这个基础库样式到底长什么样. 这些密密麻麻的就是压缩后的样式库.密密麻麻地看起来简直要急死密集恐惧症啊.不要急,您请往下看.仔细看我们能看到,这个样式库为很多类写了样式.也就是说,我们只要在html页面中使用这些样式,就能构建一个页面了.[只要写类名,省去了为很多标签定义样式,是不是省事多了呢?]对WeUI的介绍就到这了,下面都是满满的干货啦. 开始写页面前的准备要想有这个样式库,

基于Jquery WeUI的微信开发H5页面控件的经验总结（1）

在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI,本篇随笔结合官方案例和自己的项目实际开发过程的经验总结,对在H5页面开发过程中设计到的界面控件进行逐一的分析和总结,以期能够给大家在H5页面开发过程中提供有用的参考. 1.资源参考 WeUI : https://github.com/Tencent/weui WeUI for work:WeUI

uniapp中使用picker中的注意事项

APP端中picker点击后不弹出: 1.请确保picker标签里面嵌套了一个view,并且view里面有值 2.请确保picker中的默认值的格式跟该picker类型的值对应例如下面: <view class="time_wrap"> <input type="text" disabled="true" v-model="timeList.time9" placeholder="开始时间&quo

weui picker 遮罩不启用

热门专题