jq-weui滚动刷新,日历,和地址选择器
来源:互联网 发布:华夏网络危机公关 编辑:程序博客网 时间:2024/06/08 06:31
最近工作方面的原因,接触到了微信公众号。然后网上找资料发现了jq-weui这个框架,觉得特别不错,分享一下
- 下载jq-weui点击这里下载jquery-weui,这里一定要注意下载的版本。因为有些功能是只有新版本支持,老版本会出一些bug。之前就是被这个地方坑了,前任前端下载的jquery-weui.js与weui.css的版本对应不上,生成的代码class与css文件中的对应不上(我的是_与-的区别,看了2个小时才发现)所以之前如果引用过weui的话下载的时候一定要注意js与css版本的对应。
- 滚动刷新
1.引入js与css,然后 绑定需要调用滚动刷新的元素官网例子如下
//正在加载代码 这个是正在加载的文字代码 放在需要滚动刷新的容器下方<div class="weui-loadmore"> <i class="weui-loading"></i> <span class="weui-loadmore__tips">正在加载</span></div>//默认绑定给你body,也可以根据自己的需要绑定对应的div或者什么//infinite()中可以传入想要初始化的参数 距离底部100px时触发滚动刷新$(document.body).infinite("100");//官网调用示例//由于滚动刷新方法本身不知道你是否正在加载所以官网生命了loading状态用来判断是否正在加载var loading = false; //状态标记$(document.body).infinite().on("infinite", function() { if(loading) return; loading = true; setTimeout(function() { $("#list").append("<p> 我是新加载的内容 </p>"); loading = false; }, 1500); //模拟延迟});
注意加载结束后他的状态标记不会消失,只是被顶到了下边,如果你的数据已经加载完了,可以用js将加载状态隐藏掉
- 日历
//html代码中写一个用到当做触发元素的input <input type="text" data-toggle='date' id="my-input"/>//js代码初始化改input $("#my-input").calendar();
初始化中可以加的参数官网上都有 只是说一下我遇到的问题,我的需求是用户可以选择时间,也可以不选择时间。不选择时间的话就默认为空。但是日历插件中没有对应的按钮,研究了下他页面的代码。决定去源码里边改一下,自己增加一个按钮用来完成功能。
//顺着官网的参数找到了如下代码,发现他是插件顶部的代码,所以准备直接在上边添加按钮toolbarTemplate: '<div class="toolbar">' + //*** 包围的是新增的代码 '<div>' + '<a href="javascript:;" class="weui-btn weui-btn_primary noTime">时间不限</a>'+ '</div>'+ //**** '<div class="toolbar-inner">' + '{{yearPicker}}' + '{{monthPicker}}' + // '<a href="#" class="link close-picker">{{closeText}}</a>' + '</div>' + '</div>'
目前效果如下图样式是丑了点,但是功能实现了,再调一下样式就行了。
//但是目前单击按钮时没有任何反应,因为事件未绑定。//因为按钮时后来添加的 直接找到按钮找不到 所以绑定到了body上边 $("body").on("click",function(e){ if($(e.target).hasClass("noTime")){ //单击时赋值并且关闭时间插件 $("#shijian").val("时间不限").calendar("close"); } })
- 地址选择器
其实地址选择器和时间选择器属于同一种类型,都是Picker ,所以Picker 的所有的属性地址选择器都能用,但是地址比较多 所以需要单独引用一个数据文件;下载的时候包里边应该有对应的地址数据包。
//声明触发地址选择器的input <input type="text" id='city-picker'/><script> $("#city-picker").cityPicker({ title: "请选择收货地址" });</script>
地址选择器用法比较简单,说说碰见的问题。由于需要传区域编码到后台,正好地址选择器也支持区域编码,所以直接调用,但是发现了问题,正常情况,选择地址分省市区,直辖市的话没有省,所以他的省和市编码是相同的。可是我的项目上每一个编码都是独立的不能出现相同的编码。数据源也是国家统计局发布的信息。就是在这个直辖市上除了问题,编码对不上,排查了一个小时。发现了问题。希望能给后来用的做一点提示。
阅读全文
0 0
- jq-weui滚动刷新,日历,和地址选择器
- jquery weui 实现手机滚动刷新,结合底部tabber
- jQ介绍和选择器使用
- jQ 子元素选择器和后代选择器
- weui和jquery weui关系
- JQ选择器
- jq选择器
- JQ选择器 $
- JQ选择器
- jq-选择器
- jQ选择器
- JQ选择器
- JQ选择器
- jq选择器
- JQ选择器
- JQ选择器
- Android--DatePicker和TimePicker(日历选择器与时间选择器)
- 使用日历选择器DatepicKer和时间选择器TimepicKer
- java 做页面静态化
- 专访华热科技高级架构师刘紫健:没有大数据,智慧供热的目标就无法达成
- [STA] setup 和 hold 的一些基础知识
- three.js 05-05 之 SphereGeometry 几何体
- Oracle OCI-22053:溢出错误解决方法
- jq-weui滚动刷新,日历,和地址选择器
- VS2013配置opencv环境
- cocoapods 封装库
- 【福利】5分钟快速获取免费电子邮件数字证书
- nginx从http升级https
- Java基本类型和引用类型
- C#中NPOI操作excel之读取和写入excel数据
- 如何扒前端页面
- OpenCL demo