本文目录
jquery weui滑动删除和点击事件冲突，请问怎么解决
点击事件不要使用onCLick而是在OnTouch（……）的MotionEvent.ACTION_UP中判断，如果左右滑动距离大于某个值视为滑动删除；否则视为点击事件即可；switch (event.getAction()) { case MotionEvent.ACTION_DOWN: //…… break; case MotionEvent.ACTION_UP: if (再次判断手势滑动距离是否满足条件) { 如果满足视为滑动操作 } else {//否则 视为点击事件.避免事件冲突 **// 跳转 } break; } return false; }
如何利用weui作为前端来开发
先引用样式文件. 请在github上下载对应的文件. 下载地址为: 3次未审核, 搜索吧.下载之后的目录结构为: dist : 编译之后的目录, 里面的文件可以直接使用src : 源码目录可以打开dist下example目录, 这个是官方的例子文件. 里面比较全的基本使用方法. 打开example目录下的index.html 就可以看到官方的例子了. 这里需要说明一下, 这个官方使用的zepto.js框架. 这个框架更加适用移动端. 开始使用, 如果使用呢? 第一步先把css文件引用到页面中. 《link rel="stylesheet" type="text/css" href="路径地址" /》然后, 就可以使用官方的样式了. 首先来说明一下button. 使用方法:class="weui_btn weui_btn_primary"其中属性有: weui_btn weui_btn_primaryweui_btn weui_btn_warnweui_btn weui_btn_default三种, 如果你想扩展, 直接增加响应的样式就可以了. Tab使用: tab包含两种: navbar 和 tabbar使用方法. navbar : 《div class="weui_tab"》《div class="weui_navbar"》《div class="weui_navbar_item weui_bar_item_on"》 选项一《/div》《div class="weui_navbar_item"》 选项二 《/div》《div class="weui_navbar_item"》选项三 《/div》《/div》《div class="weui_tab_bd"》《/div》《/div》weui_bar_item_on 为选中项tabbar:《div class="weui_tabbar"》《a href="javascript:;" class="weui_tabbar_item weui_bar_item_on"》《div class="weui_tabbar_icon"》《img src="./images/icon_nav_button.png" alt=""》《/div》《p class="weui_tabbar_label"》微信《/p》《/a》《a href="javascript:;" class="weui_tabbar_item"》《div class="weui_tabbar_icon"》《img src="./images/icon_nav_msg.png" alt=""》《/div》《p class="weui_tabbar_label"》通讯录《/p》《/a》《a href="javascript:;" class="weui_tabbar_item"》《div class="weui_tabbar_icon"》《img src="./images/icon_nav_article.png" alt=""》《/div》《p class="weui_tabbar_label"》发现《/p》《/a》《a href="javascript:;" class="weui_tabbar_item"》《div class="weui_tabbar_icon"》《img src="./images/icon_nav_cell.png" alt=""》《/div》《p class="weui_tabbar_label"》我《/p》《/a》《/div》图片来自官方例子中的素材.Toast弹出层: 一个是弹出提示数据. 《div id="toast"》《div class="weui_mask_transparent"》《/div》《div class="weui_toast"》《i class="weui_icon_toast"》《/i》《p class="weui_toast_content"》已完成《/p》《/div》《/div》使用$(’#toast’).show();进行显示数据.searchBar搜索框简单的搜索, 搜索世界的大不同, 不是所有的网站都可以图标的使用. 《i class="weui_icon_msg weui_icon_success"》《/i》《i class="weui_icon_msg weui_icon_info"》《/i》《i class="weui_icon_msg weui_icon_warn"》《/i》《i class="weui_icon_msg weui_icon_waiting"》《/i》《i class="weui_icon_safe weui_icon_safe_success"》《/i》《i class="weui_icon_safe weui_icon_safe_warn"》《/i》Panel的使用《div class="weui_panel weui_panel_access"》《div class="weui_panel_hd"》图文组合列表《/div》《div class="weui_panel_bd"》《a href="javascript:void(0);" class="weui_media_box weui_media_appmsg"》《div class="weui_media_hd"》《img class="weui_media_appmsg_thumb" src="" alt=""》《/div》《div class="weui_media_bd"》《h4 class="weui_media_title"》标题一《/h4》《p class="weui_media_desc"》由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。《/p》《/div》《/a》《a href="javascript:void(0);" class="weui_media_box weui_media_appmsg"》《div class="weui_media_hd"》《img class="weui_media_appmsg_thumb" src="" alt=""》《/div》《div class="weui_media_bd"》《h4 class="weui_media_title"》标题二《/h4》《p class="weui_media_desc"》由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。《/p》《/div》《/a》《/div》《a class="weui_panel_ft" href="javascript:void(0);"》查看更多《/a》《/div》图片里面没有填写地址, 请您自己填写信息.
小程序引入weui使用步骤
第一步： 在app.json中，设置 "useExtendedLib":{ "weui": true } 第二步： 在对应需要使用组件的页面json文件中，引入，例如引入弹框组件 { "usingComponents": { "mp-dialog": "weui-miniprogram/dialog/dialog" } } 第三步：在对应wxmll文件中，引入结构 《mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{}}"》 《view》test content《/view》 《/mp-dialog》
