wui

说一下自己写项目的体会吧,自我感觉wui还不错,能够让自己很快地把页面布局好,而且里面一些js效果也不用自己去手写jQuery代码很方便,下面让我们一起来认识一下wui这个框架吧

1,accordion(折叠面板也就是二级列表)默认收缩,如果展开只需要在包含.W-UI-collapse类的li节点上,增加.W-UI-active类即可,比自己在那写原生方便又快

2,W-UI-popover,弹出框,如果在底部直接在w-ui-popover的类中加.W-UI-popover-bottom.W-UI-popover-action也可以传入toggle,用户不用关心怎么隐藏的只需要会使用即可

3轮播

其实wui的轮播和bootstrap相似,只是多了前缀w-ui,其他是一样的

4,w-ui滚动事件

  • Android平台4.0以下不支持div滚动
  • Android平台4.0以上支持div滚动,但不显示滚动条
  • 弹出层的div滚动在iOS平台存在事件透传的问题
  • W-UI额外提供了区域滚动组件,使用时需要遵循如下DOM结构
     <div class="W-UI-scroll-wrapper">
    <div class="W-UI-scroll">
    <!--这里放置真实显示的DOM内容-->
    </div>
    </div>
    区域滚动默认为absolute W-UI('.W-UI-scroll-wrapper').scroll({
    deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
    }); //如果手动滚动需初始化scroll

最近在写h5的页面,发现有一款框架还不错给大家推荐一下的更多相关文章

  1. Html+css 练习写页面发现的错误及解决办法。

    最近开始模仿写一些静态页面,今天模仿的是中华咨询网.写了一个简单的js(功能:当鼠标hover一级菜单的时候,设置二级菜单为显示,当鼠标hover二级菜单的选项时候,二级菜单不收回.当鼠标移出菜单一级 ...

  2. Android使用WebView加载H5页面播放视频音频,退出后还在播放问题解决

    Android中经常会使用到WebView来加载H5的页面,如果H5页面中有音频或者视频的播放时,还没播放完就退出界面,这个时候会发现音频或者视频还在后台播放,这就有点一脸懵逼了,下面是解决方案: 方 ...

  3. 利用简洁的图片预加载组件提升h5移动页面的用户体验

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

  4. 运用预加载提升H5移动页面的用户体验

    原文地址:http://www.grycheng.com/?p=2188 在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用 ...

  5. 利用Django徒手写个静态页面生成工具

    每个Geek对折腾自己的博客都有着一份执念 背景介绍 曾经多次在不同的平台写博客,但全部都以失败而告终.去年七月选择微信公众号做为平台开始了又一次的技术分享,庆幸一直坚持到现在,但随着文章发表的越来越 ...

  6. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  7. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  8. H5 App页面 绝对定位 软键盘弹出时顶起底部按钮

    做H5 App页面时,有时候,按钮可能会放到页面的最底下,这个时候可能会用到绝对定位(position: absolute),但是,当input 输入框被点击时,弹出的软键盘会顶起底部的按钮,就像这样 ...

  9. 快速构建H5单页面切换应用

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

随机推荐

  1. 利用MathType为公式编号并引用

    序言 在理工科的论文撰写过程中, 公式编辑.编号以及引用非常普遍, 但是笔者没有发现word本身对公式编号和引用有比较好的支持, 所以只好求助于第三方插件. MathType在公式编辑方面表现比较出色 ...

  2. 牛客随笔(c++)

    1.关于指针的字节大小: 当为32位系统时大小为4字节,64位系统时大小为8字节: #include<iostream> using namespace std; int main() { ...

  3. MySQL保留字 ERROR 1064 (42000)

    在MySQL(5.7.18)数据库中建表 CREATE TABLE SA_ACT_ITEM ( ITEMID ) NOT NULL, REGION ), ACTIONID ), ITEMNAME ), ...

  4. python中pip升级

    第一步: 首先安装python,在百度中搜索python,进入python官网,点击downliad, 下载到本地: 下载好后进行安装,与一般软件安装过程一样.安装过程中要注意勾线Add python ...

  5. sql server导出数据,远程连接失败,需要设置权限

    在sql  server management中右键当前连接——>方面 在 服务器配置中 将  RemoteAccessEnabled.RemoteDacEnabled设置为TRUE 安全性—— ...

  6. ava新手入门详细介绍

    Java总有它的千般好处使你选择它,但这些随便翻翻书或在网上逛一圈就能找到答案.在本文中,笔者把自己学习Java的一些切身体会和过程写出来,供初学者做个参考. 我在学习Java的过程中主要围绕以下几个 ...

  7. webpack4 坑收集:html-webpack-plugin在多页面时,无法将optimization.splitChunks提取的公共块,打包到页面中

    问题描述:  有2个页面index.html和product.html,用html-webpack-plugin和optimization.splitChunks的基本配置如下 { template: ...

  8. urlconnection代码

    package com.yucheng.connection; import java.io.BufferedReader; import java.io.InputStream; import ja ...

  9. CCF CSP 201812-1 小明上学

    题目链接:http://118.190.20.162/view.page?gpid=T80 问题描述 试题编号: 201812-1 试题名称: 小明上学 时间限制: 1.0s 内存限制: 512.0M ...

  10. python 基于numpy的线性代数运算

    import numpy as np A = [[1,2],[2,1]] np.linalg.inv(A)  #计算矩阵A的逆矩阵. #显示结果 [[-0.33333333 0.66666667] [ ...