首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

MUI进行APP混合开发实现下拉刷新和上拉加载 原创

为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表情况); 通过双webview解决这个DIV拖动流畅度问题;拖动...: "下拉可以刷新",//可选,在下拉可刷新状态,下拉刷新控件上显示标题内容 contentover : "释放立即刷新",//可选,释放可刷新状态,下拉刷新控件上显示标题内容...,//可选,正在刷新状态,下拉刷新控件上显示标题内容 callback : fn //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据; } } }); 第四步...mui.init({ pullRefresh : { container:"#pullrefresh",//待刷新区域标识,querySelector能定位css选择器均可,比如:id...,//可选,正在加载状态,上拉加载控件上显示标题内容 contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据显示提醒内容; callback

1.1K10

AngularDart Material Design 日期选择器

disabled bool 是否应禁用更改所选日期范围。 error String 下拉按钮下方显示错误。 maxDate Date  无法选择晚于maxDate日期。...默认为后十年12月31日。将其设置为领域上下文中有意义最新日期。 例如对于分析历史数据应用,这可能是当天。...将此设置为领域上下文中有意义最早日期。 例如数据可用于分析最早日期。当用户重新打开弹出窗口,对minDate更改仅应用于选定“范围”。...placeHolderMsg String  如果未选择日期范围,则显示占位符消息。 predefinedRanges List 已禁用!...supportsDaysInputs bool  此日期范围选择器是否包含输入“N天到今天”和“N天到昨天”范围部分。 默认为true。

5.1K30
您找到你想要的搜索结果了吗?
是的
没有找到

最新iOS设计规范五|3大界面要素:控件(Controls)

七、选择器(Pickers) 选择器可以显示一个或多个可滚动不同值列表,供人们选择。iOS 14及更高版本中,日期选择器支持其他选择值方式,例如在日历视图中选择日期或使用数字键盘输入日期和时间。...选择器通常显示屏幕底部或弹出窗口中。 日期选择器 日期选择器是用于使用触摸屏,键盘或定点设备选择特定日期,时间或两者有效界面。...您可以使用以下样式之一显示日期选择器日期选择器是用于使用触摸屏,键盘或鼠标选择特定日期、时间有效界面。...显示日期,小时,分钟和(可选)AM / PM名称。 倒计时器。显示小时和分钟,最多23小59分钟。此模式不适用于紧凑型样式。 日期选择器显示的确切值及其顺序取决于用户使用环境。...当人们点击按钮日期选择器将扩展为模式视图,从而提供对熟悉日历样式编辑器和时间选择器访问。模式视图中,人们可以对日期和时间进行多次编辑,然后视图外部轻按以确认他们选择。

8.5K30

跨平台移动APP开发进阶(三):hbuilder+mui mobile app 开发心酸路

1.问题描述:实现图片轮转,若将 mui("#slider").slider({ interval: 5000 }); 置于图片加载之前,图片不会显示, 解决措施:将其置于图片显示之后才会显示。...2.问题描述: 同上面的问题,会遇到报指针为null异常。若要获取一个组件id,可能带获取组件还未加载,导致获取失败。 解决措施:将获取组件idjs脚本定义组件id之后完成。...3.问题描述:页面是由主页面加内容页面组合而成。页面做弹出菜单,弹出菜单无法显示。 问题根源:内容页面遮挡了弹出菜单,致其无法显示。 解决措施:弹出层放在内容页面里,父页面通知内容页面显示。...并获取其id 解决措施: //on中参数含义依次为事件、选择器、参数、方法,其中选择器与参数为可选项 mui(‘.mui-content’).on(‘tap’,‘body’,function(){

3.1K30

最好用 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云

vue timepicker 除了基础选择日期时间外,还有非常多样功能配合不同场景使用,比如 12/24小,禁止选择某些日期,高亮某些日期,夜间模式,多语言,酒店订单特别场景等。...Vue Vanilla - 12/24 小时制,可「高亮显示」和「禁用显示日期 06-all-Vue-Vanilla-Datetime-Picker Vue Vanilla 日期/时间选择器比其他几个优势在于它有...「高亮显示」和「禁用显示日期功能,很适合引导用户选择和标记哪些日期用户不能选择场景。...日期/时间选择器 突出显示禁用日期, 12/24 小时制 7....日期/时间选择器 日期范围选择器 禁用日期显示 可定制颜色 11.Vue MJ DateRange Picker - 一键范围选择,自定义主题,多语言 11-all-Vue-MJ-DateRange-Picker

6.6K00

从官方 Demo 了解小程序能力

表单组件 button(button 上可以显示加载动画、可以设置禁用); checkbox; form(可以提供表单提交能力); input(输入框,能监听输入事件,限制输入类型,设置 hint 内容...); label; picker(类似 Android WheelView,默认有普通、时间、日期三种选择器,可以利用它轻松制作一个地区联动选择器); radio(就是 Android 里 RadioButton...但它有一个 bug,即在这个组件中输入完一行后,光标会跳到文本最开始)。 导航 navigator 组件可以方便地让开发者不同页面之间进行跳转。 顺便说一句,小程序所有页面都具有滑动返回功能。...界面 设置界面标题; 标题栏加载动画; 页面跳转; 下拉刷新; 创建动画(常见补间动画都有); 创建画布; 显示操作菜单 (弹出一个列表弹窗); 显示弹窗 (类似 Android AlertDialog...但选择录制新视频,也是通过系统相机应用进行拍摄。 小程序首次调用图片、录音、读写数据、文件等功能,会出现权限确认框。

1.8K30

跨平台移动APP开发进阶(一):mui开发注意事项

DOM结构 关于mui页面的dom,你需要知道如下规则: 固定栏靠前 所谓固定栏,也就是带有.mui-bar(类选择器)属性节点,都是基于fixed定位元素;常见组件包括:顶部导航栏(.mui-bar-nav...窗口管理 页面初始化:必须执行mui.init方法 mui页面初始化时,初始化了很多参数配置,比如:按键监听、手势监听等,因此mui页面都必须调用一次mui.init()方法; 页面跳转:抛弃href...跳转 当浏览器加载一个新页面,若页面DOM尚未渲染完毕,页面会先显示空白,然后等DOM渲染完毕后,再显示具体内容,这是WEB浏览器技术无法逾越体验障碍;为解决这个问题,建议使用 [mui.openWindow...方法](http://dcloudio.github.io/mui/javascript/#openwindow)打开一个新webview,mui会自动监听新页面的loaded事件,若加载完毕,再自动显示页面...;扩展阅读: hello mui无等待窗体切换是如何实现 提示HTML5性能体验系列之一 避免切页白屏 页面关闭:勿重复监听backbutton mui框架自动封装了页面关闭逻辑,若希望自定义返回逻辑

1.4K20

hbuilder 开发APP填坑经验

hbuilder中进行窗口管理有2种方式,一种是用了mui框架,可以用mui提供管理方式,都封装好了。 还有一种是没有用mui,可以直接通过最底层plus.webview来管理窗口操作。...使用过程中我遇到了下面的问题: 1,APP下面有一个toolbar,目前每次点击一个按钮都是通过webview创建一个新view,view中去加载网页(我们功能实现都是通过h5方式嵌入到app...,进入用户主页,在用户主页取消关注,然后回退到我主页中,回退相当于重新打开之前开启过view,这个时候我页面关注数还是之前,取消关注并没有从总关注数中减去,今天回退基础上做了扩展,...但是刷新页面其实用户体验很差,最好办法是异步加载,只改变需要改变地方,为了支持这个我还加了一个回调方法,可以支持方法回调,你可以自己写逻辑去实现数据刷新。...function(){//页面关闭后可再次打开 //可以设置页面关闭回调方法,可以对数据进行重新加载操作 if(callback){

1.9K80

如何编写一个 Vue JS 内嵌组件

Vue 应用程序中使用 jQuery 插件这种组合似乎是最无处不在。 我们快速介绍一下如何使用日期范围选择器构建内嵌组件例子,这个组件允许你选择开始日期和结束日期。...jQuery 选择器,所以需要我们组件中复制它。...就我看来,我希望日期范围选择器是一个可点击按钮,但用户会因此无法通过表单输入来编辑日期范围。 为此,我们有一个组件日期范围更新发出事件。...因为我更倾向于只添加我项目中所需要选项。 基于组件传递 props ,你可以自定义插件可用功能和选项,这使得这个内嵌组件非常灵活,只显示你想要公开选项,隔离或禁用一些不需要选项。... computed 属性中用 dateRange 方法来更直观地显示日期范围。 如果开始日期和结束日期范围是今天,则标签将输出「今天」。如果日期范围仅包含一天,则只显示一个日期

3.9K40

顺势而为,HTML发展与UI组件设计进化 - 腾讯ISUX

如果我们单看功能,确实很强大,禁用日期可以任意自定义,可以轻松定义各个操作栏是否显示,确实是企业级web组件,看上去能适应各种复杂场景。 但是,在我看来,问题却非常多。...二、探索 正是由于当下有这些不如意现状,所以我就一直思考,有没有什么办法可以做出改变,不一定是大跨越式一步到位,至少能指明柳暗花明另一条路。...我们还是拿时间选择器举例,想想看,HTML5有没有为我们带来nativeUI组件?...好,我们现在实现了基于HTML5间选择组件落地实践生产,加以推广,势必对HTML5标准国内学习与普及带来帮助。...下面,见证奇迹时刻到了,点击demo页面(下图所示)按钮进行QQ公众平台UI组件资源加载和初始化: ? 结果,一瞬间,上面原始粗糙界面一下子变成了这样子: ?

1.2K80

日期选择器DatePicker和时间选择器TimePicker

实际开发中,经常会遇见一些时间选择器日期选择器、数字选择器等需求,那么从本期开始来学习Android中常用选择器今天学习是DatePicker和TimePicker。...其FrameLayout基础上提供了一些方法来获取当前用户所选择日期,如果程序需要获取用户选择日期则可通过为DatePicker添加 OnDateChangedListener 进行监听来实现。...使用DatePicker常用XML属性如下: android:calendarViewShown:设置该日期选择是否显示CalendarView组件。...android:endYear:设置日期选择器允许选择最后一年。 android:maxDate:设置该日期选择器最大日期。以mm/dd/yyyy格式指定最大日期。...android:minDate:设置该日期选择器最小日期。以mm/dd/yyyy格式指定最小日期。 android:spinnersShown:设置该日期选择器是否显示Spinner日期选择组件。

4.7K50

uni-app入门教程(4)组件基本使用

支持五种选择器,通过mode来区分,分别是普通选择器、多列选择器、时间选择器日期选择器和省市区选择器,默认是普通选择器。...可以看到,选择值后,显示也会同步变化,被选择下标存储e.detail.value中。...(4)日期选择器,参数为mode = date,常见属性和事件如下: 属性名 类型 说明 value String 表示选中日期,格式为"YYYY-MM-DD" start String 表示有效日期范围开始...可以看到,选择器处于打开状态,value为true,处于关闭状态,value为false。 9.textarea 多行输入框。...2.参数传递 进行页面跳转,向其他页面传递参数一般组件或接口url参数指定地址后追加,以?开始,=连接参数名和参数值,&拼接不同参数。

3.6K50

Python带你薅羊毛:手把手教你揪出最优惠航班信息

用 XPath 来页面中进行跳转有的时候还是容易把人搞晕,即使你用了网上那些文章中技巧,比如在“检查元素”中直接右键“复制 XPath”等方式来获取对应网页元素 XPath 信息,也不见得就是最佳办法...上面的代码中,那个字符串就是 XPath 选择器。你可以在网页中任意元素上点击右键,选择 检查,当开发者工具弹出,你就可以在窗口中看到你选中元素代码了。...不过,没那么“复杂”网站上,直接用复制 XPath 也是可以完成任务。具体问题具体分析吧! 完成了上面的这些步骤之后,搜索结果应该已经显示出来了。...,这样我们就能比较直观地看出程序有没有正确地获取到我们需要信息。...我们目标是,一页里尽可能多地获取航班信息,同时又不触发验证码检查。所以,我做法是,一页内容载入进来之后,点一下(就一下!)页面加载更多结果」按钮。

1.3K20

全栈开发工程师微信小程序-上(下)

}] }] }, tap() { console.log('tap') } }) progress 进度条 percent 百分比0~100 show-info 进度条右侧显示百分比...label.对于radio代码使用了labelfor属性,一个labelfor属性对应于一个radioid. picker 普通选择器,多列选择器,时间选择器日期选择器,省市区选择器,默认是普通选择器...嵌入页面的滚动选择器 picker组件是基于picker-view组件实现. radio-group 单项选择器,是由多个单选项目组成. // radio-group bindchange...是否禁用 value 当前取值 color 背景条颜色 activeColor 已选择颜色 backgroundColor 背景条颜色 show-value 是否显示当前 value <view...switch 开关选择器 checked 是否选中 disabled 是否禁用 type 样式,有效值:switch, checkbox bindchange checked 改变触发 color

1.4K40

跨平台移动APP开发进阶(二):HTML5+、mui开发移动app教程

大家好,又见面了,我是你们朋友全栈君。 序 通过 HTML5 开发移动App ,会发现HTML5 很多能力不具备。...当然这些移动 App 里某些页面也可以继续从服务器端以网页方式运行。所以mobile web,HBuilder 里新建项目,属于web 项目。不要放置到移动App 项目。...缺陷:毕竟不是app,不管怎样也没办法取代app便捷和功能强大。...3.子页面使用频繁切换情况 如果频繁左滑右滑,配置较低手机上会出现list.html遮住index.html情况,采用子页面模式就不会,采用新页面模式几率很大。...6.预加载页面的两种方式 第一种是初始化时候预加载,这种情况适合在你这个页面很久之后才会用,如果你要立即到页面并使用,那么你会得到null。

4.3K21

Flutter中日期、格式化日期日期选择器组件

今天我们来聊聊Flutter中日期日期选择器。...,我们经常会遇到选择时间或者选择日期场景,接下来我将为大家介绍Flutter中自带日期选择器和时间选择器。...firstDate: DateTime(1980), //日期选择器上可选择最早日期 lastDate: DateTime(2100), //日期选择器上可选择最晚日期...这两个选择器默认显示效果都是英文,我们是中国,那么就需要将其显示成中文版,这就涉及到Flutter国际化问题。关于Flutter国际化,接下来我将为大家做详细讲解。...上面我介绍了系统给我们提供日期时间选择器,但是有时候系统提供选择器并不符合我们要求,这时我们就可以到pub.dev上去寻找符合我们要求日期选择器

25.2K52

企业如何借助码匠,实现员工核酸提醒?

,将会通过执行该查询对显示数据进行刷新,注意该组件禁用属性可设置为 true,意思是终端用户对该组件权限为只读,查询代码如下。...:{{moment().format("yyyy-MM-DD")}}作用:「默认值」为默认显示当前日期,但终端用户也可以自行选择日期,但是本次核酸日期最大值不得超过今天。...」中查询作用为获取当前用户有效核酸天数,当终端用户打开界面执行查询对数据进行刷新,注意该组件禁用属性也是 true,即终端用户对该组件权限为只读。...}}作用:用户点击即可更新自己核酸日期,且当 currentPcrDate 值无效,即所选已做核酸日期超过了当前日期,将会禁用按钮,防止录入错误信息。...图片needNotifyUsers该查询有两个作用:一是将通知时间控制早八点至晚八点之间;二是获取「今天」需要做核酸成员名单。

1.1K50
领券