背景
敌人找我帮忙弄挪动端H5几个界面（相似静止排行）
技术框架
- WeUI
- zepto.js
- date_picker
开发笔记
本文次要记录开发过程中比拟有印象、想分享的几个知识点。
WeUI主题
我是在mac上开发的，在开发这个H5界面的时候，默认都是深色主题的，一开始就间接基于深色去写款式笼罩了。
起初发现是我零碎偏好设置的外观默认选的是“深色”的，WeUI主题就默认是光明模式DarkMode，能够强制应用亮色：
<body data-weui-theme="light"> ...</body>如下是光明模式和亮色模式的根底色彩变量
在body里定义通用色彩变量（主题色），应用时用var()函数来获取
日期抉择
weui里也有日期抉择组件，但款式如左图，看习惯了日历模式的日期组件，所以找了如右图基于zepto的轻量级日期插件
0.5px的边
WeUI的线框都是用伪元素:before和:after实现的1px的边，且用transform放大一倍让线更细（0.5px的边）
下拉刷新
WeUI里没看到有下拉刷新组件，于是联合搜到的基于zepto.js的下拉刷新代码去实现的，附上残缺的基于WeUI和zepto.js的列表下拉刷新样例：
（例子都是引入的CDN的资源，复制以下代码html和js即可用）
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>基于WeUI和zepto.js的列表下拉刷新样例</title> <!-- 引入 WeUI CDN 链接 --> <link rel="stylesheet" href="https://res.wx.qq.com/t/wx_fed/weui-source/res/2.5.6/weui.css" /> <!-- 引入 zepto CDN 链接 --> <script src="https://cdnjs.gtimg.com/cdnjs/libs/zepto/1.1.4/zepto.js"></script> <style> html, body { height: 100%; } .container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; color: var(--weui-FG-0); } .page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; z-index: 1; } .page__hd { padding: 40px; } svg.icon { fill: var(--weui-FG-0); } .weui-bar__item_on svg.icon { fill: var(--weui-BRAND); } .weui-tab__panel { padding: 5px; } .g-scroll-container, .g-scroll-container-2 { border: 1px solid #e5e5e5; overflow: auto; } </style></head><body data-weui-theme="light"> <div class="container" id="container"> <div class="page"> <div class="page__bd" style="height: 100%;"> <!-- tabbar组件 --> <div class="weui-tab"> <div id="panel1" role="tabpanel" aria-labelledby="tab1" class="weui-tab__panel g-scroll-container"> <div class="weui-cells__title">【List组件】带图标、阐明的列表项</div> <div class="weui-cells g-scroll-content"> <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div> <div class="weui-cell__bd"> <p>题目文字1</p> </div> <div class="weui-cell__ft">阐明文字1</div> </div> <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div> <div class="weui-cell__bd"> <p>题目文字2</p> </div> <div class="weui-cell__ft">阐明文字2</div> </div> <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div> <div class="weui-cell__bd"> <p>题目文字3</p> </div> <div class="weui-cell__ft">阐明文字3</div> </div> <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div> <div class="weui-cell__bd"> <p>题目文字4</p> </div> <div class="weui-cell__ft">阐明文字4</div> </div> <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div> <div class="weui-cell__bd"> <p>题目文字5</p> </div> <div class="weui-cell__ft">阐明文字5</div> </div> <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div> <div class="weui-cell__bd"> <p>题目文字6</p> </div> <div class="weui-cell__ft">阐明文字6</div> </div> <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div> <div class="weui-cell__bd"> <p>题目文字7</p> </div> <div class="weui-cell__ft">阐明文字7</div> </div> <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div> <div class="weui-cell__bd"> <p>题目文字8</p> </div> <div class="weui-cell__ft">阐明文字8</div> </div> <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div> <div class="weui-cell__bd"> <p>题目文字9</p> </div> <div class="weui-cell__ft">阐明文字9</div> </div> <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div> <div class="weui-cell__bd"> <p>题目文字10</p> </div> <div class="weui-cell__ft">阐明文字10</div> </div> <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div> <div class="weui-cell__bd"> <p>题目文字11</p> </div> <div class="weui-cell__ft">阐明文字11</div> </div> <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div> <div class="weui-cell__bd"> <p>题目文字12</p> </div> <div class="weui-cell__ft">阐明文字12</div> </div> <div role="alert" class="weui-loadmore"> <span aria-hidden="true" role="img" aria-label="加载中" class="weui-primary-loading"> <i class="weui-primary-loading__dot"></i> </span> <span class="weui-loadmore__tips">正在加载</span> </div> </div> </div> <div id="panel2" role="tabpanel" aria-labelledby="tab2" class="weui-tab__panel" style="display: none;"> <!-- 第二个tab的panel内容 --> <div style="height: 30%;"> Dolor eum rerum magnam voluptatem omnis fuga, dolore libero quibusdam cupiditate Sequi vero rem corrupti hic veritatis Atque exercitationem odit odit ducimus esse, sapiente laborum inventore! Ipsum harum quo minus</div> <div class="weui-cells__title">带阐明的列表项</div> <div class="g-scroll-container-2" style="height: 60%;"> <div class="weui-cells g-scroll-content-2"> <div role="option" class="weui-cell "> <div class="weui-cell__bd"> <p>题目文字1</p> </div> </div> <div role="option" class="weui-cell "> <div class="weui-cell__bd"> <p>题目文字2</p> </div> </div> <div role="option" class="weui-cell "> <div class="weui-cell__bd"> <p>题目文字3</p> </div> </div> <div role="option" class="weui-cell "> <div class="weui-cell__bd"> <p>题目文字4</p> </div> </div> <div role="option" class="weui-cell "> <div class="weui-cell__bd"> <p>题目文字5</p> </div> </div> <div role="option" class="weui-cell "> <div class="weui-cell__bd"> <p>题目文字6</p> </div> </div> <div role="option" class="weui-cell "> <div class="weui-cell__bd"> <p>题目文字7</p> </div> </div> <div role="option" class="weui-cell "> <div class="weui-cell__bd"> <p>题目文字8</p> </div> </div> <div role="alert" class="weui-loadmore"> <span aria-hidden="true" role="img" aria-label="加载中" class="weui-primary-loading"> <i class="weui-primary-loading__dot"></i> </span> <span class="weui-loadmore__tips">正在加载</span> </div> </div> </div> </div> <div id="panel3" role="tabpanel" aria-labelledby="tab3" class="weui-tab__panel" style="display: none;"> Elit deserunt dolore nemo harum neque libero numquam, minima nam Atque nesciunt iusto aperiam eligendi praesentium ratione? Quasi iste odio itaque doloribus hic? Est aliquam recusandae dolore ratione quos. Saepe</div> <div id="panel4" role="tabpanel" aria-labelledby="tab4" class="weui-tab__panel" style="display: none;"> Amet dignissimos doloribus voluptate maxime dolorem quia Deleniti eligendi similique nisi corrupti eius aut Unde nesciunt quos quos sapiente dolorem? Odit soluta repudiandae accusantium ducimus totam accusamus. Rem ad numquam</div> <div role="tablist" aria-label="选项卡题目" class="weui-tabbar"> <div id="tab1" role="tab" aria-labelledby="t1_title" aria-describedby="t1_tips" aria-selected="true" aria-controls="panel1" class="weui-tabbar__item weui-bar__item_on"> <div id="t1_tips" aria-hidden="true" style="display: inline-block; position: relative;"> <!-- icon svg --> <svg t="1651573572396" class="weui-tabbar__icon icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5618" width="200" height="200"> <path d="M248.3 789.3l-39.7 131.8L353.2 842c52.8 13.2 105.8 26.4 158.3 26.4 250.9 0 448.6-171.6 448.6-382.8 0-210.9-197.7-382.8-448.6-382.8-237 0-448 171.9-448 382.8 0 119 78.8 224.3 184.8 303.7zM591 366.9c0-26.3 26.1-52.8 66-52.8 26.3 0 52.8 26.4 52.8 52.8 0 26.6-26.5 52.8-52.8 52.8-39.9-0.1-66-26.2-66-52.8z m-290.2 0c0-26.3 26.5-52.8 66-52.8 26.1 0 52.4 26.4 52.4 52.8 0 26.6-26.3 52.8-52.4 52.8-39.5-0.1-66-26.2-66-52.8z m0 0" p-id="5619"></path> </svg> <span class="weui-badge" style="position: absolute; top: -2px; right: -13px;">8</span> </div> <p id="t1_title" aria-hidden="true" class="weui-tabbar__label">微信</p> </div> <div id="tab2" role="tab" aria-labelledby="t2_title" aria-selected="false" aria-controls="panel2" class="weui-tabbar__item"> <svg t="1651573611671" class="weui-tabbar__icon icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6484" width="200" height="200"> <path d="M778.176 810.666667v64h-160v-64h160z m-445.504-212.693334c18.666667 11.690667 38.826667 21.205333 60.16 28.202667L234.666667 810.666667h287.509333v64H234.666667a64 64 0 0 1-48.597334-105.642667l146.602667-171.050667zM842.176 704v64h-224v-64h224z m0-106.666667v64h-224v-64h224z m-362.666667-448c117.824 0 213.333333 95.509333 213.333334 213.333334s-95.509333 213.333333-213.333334 213.333333-213.333333-95.509333-213.333333-213.333333 95.509333-213.333333 213.333333-213.333334z m0 64a149.333333 149.333333 0 1 0 0 298.666667 149.333333 149.333333 0 0 0 0-298.666667z" p-id="6485"></path> </svg> <p aria-hidden="true" id="t2_title" class="weui-tabbar__label">通讯录</p> </div> <div id="tab3" role="tab" aria-labelledby="t3_title" aria-describedby="t3_tips" aria-selected="false" aria-controls="panel3" class="weui-tabbar__item"> <div id="t3_tips" aria-hidden="true" style="display: inline-block; position: relative;"> <svg t="1651573678206" class="weui-tabbar__icon icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7317" width="200" height="200"> <path d="M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m149.162667 222.901334L444.16 386.357333a96 96 0 0 0-57.802667 57.813334l-78.122666 216.992a42.666667 42.666667 0 0 0 54.602666 54.602666l217.002667-78.122666a96 96 0 0 0 57.802667-57.813334l78.122666-216.992a42.666667 42.666667 0 0 0-54.602666-54.602666zM512 565.333333a53.333333 53.333333 0 1 0 0-106.666666 53.333333 53.333333 0 0 0 0 106.666666z" p-id="7318"></path> </svg> <span class="weui-badge weui-badge_dot" role="img" alt="new" style="position: absolute; top: 0; right: -6px;"></span> </div> <p id="t3_title" aria-hidden="true" class="weui-tabbar__label">发现</p> </div> <div id="tab4" role="tab" aria-labelledby="t4_title" aria-selected="false" aria-controls="panel4" class="weui-tabbar__item"> <svg t="1651573716437" class="weui-tabbar__icon icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8194" width="200" height="200"> <path d="M430.08 71.68c130.06848 0 235.52 105.45152 235.52 235.52 0 84.82816-44.8512 159.19104-112.14848 200.66304C679.40352 560.2304 768 684.48256 768 829.44v10.24a112.64 112.64 0 0 1-112.64 112.64H184.32A112.64 112.64 0 0 1 71.68 839.68v-10.24c0-149.79072 94.57664-277.46304 227.28704-326.59456A235.19232 235.19232 0 0 1 194.56 307.2C194.56 177.13152 300.01152 71.68 430.08 71.68z m-10.24 471.04c-158.35136 0-286.72 128.36864-286.72 286.72v10.24A51.2 51.2 0 0 0 184.32 890.88h471.04a51.2 51.2 0 0 0 51.2-51.2v-10.24c0-158.35136-128.36864-286.72-286.72-286.72zM731.136 156.22144c8.86784 3.8912 17.42848 8.3968 25.6 13.43488 57.5488 35.49184 93.184 95.68256 93.184 161.77152 0 60.14976-29.4912 114.688-76.63616 150.44608 106.86464 53.18656 179.03616 170.02496 179.03616 302.592a98.89792 98.89792 0 0 1-94.37184 98.87744l-4.4032 0.1024h-15.64672a30.72 30.72 0 0 1-2.9696-61.29664l2.9696-0.14336h15.64672c20.60288 0 37.33504-16.7936 37.33504-37.53984 0-131.72736-85.6064-243.24096-200.86784-266.9568a30.72 30.72 0 0 1-23.90016-36.27008l0.2048-1.00352a30.72 30.72 0 0 1 21.38112-22.97856c59.904-17.6128 100.78208-68.44416 100.78208-125.82912 0-44.15488-24.10496-84.86912-63.97952-109.4656a149.8112 149.8112 0 0 0-18.14528-9.54368 30.72 30.72 0 1 1 24.7808-56.19712zM430.08 133.12a174.08 174.08 0 1 0 0 348.16 174.08 174.08 0 0 0 0-348.16z" p-id="8195"></path> </svg> <p class="weui-tabbar__label" aria-hidden="true" id="t4_title">我</p> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> </script></body></html>界面JS：
$(function () { //底部tab点击交互 $('.weui-tabbar__item').on('click', function () { $(this).attr('aria-selected', 'true').addClass('weui-bar__item_on'); $(this).siblings('.weui-bar__item_on').removeClass('weui-bar__item_on').attr( 'aria-selected', 'false'); var panelId = '#' + $(this).attr('aria-controls'); $(panelId).css('display', 'block'); $(panelId).siblings('.weui-tab__panel').css('display', 'none'); }); /* 第一个tab的下拉滚动刷新 */ // 下拉滚动刷新 let gScroll1 = { contentSelector: '.g-scroll-content', containerSelector: '.g-scroll-container', touchStatus: 0, // 0 init 1 move 以后状态，move为正在touchmove page: 1, //页数 total: 3, //总页数 pageSize: 12, //每页条数 scrollToNext: false, //滚动满足刷新下一页的标记 isEnd: false, //是否曾经滑到底部了，用于判断是否解决滚动 (如果只有一页，需设置为true，无需滚动加载) loading: false //正在加载数据的标记 } //监听手指初始触碰 $('.g-scroll-content').on("touchstart", function (e) { if (gScroll1.isEnd) return; gScroll1.touchStatus = 1; }); //判断向上时，如果滚动条在顶部，那么逐步减少下拉刷新的高度 $('.g-scroll-content').on("touchmove", function (e) { if (gScroll1.isEnd) return; if (!gScroll1.scrollToNext) { var aa = $('.g-scroll-container').height(); var bb = $(this).scrollTop(); var cc = $(this).height(); var dd = aa - bb - cc; if (dd < 50) { gScroll1.scrollToNext = true; } } }); //下拉刷新高度达到肯定值之后刷新页面 $(".g-scroll-content").on("touchend", function (e) { if (gScroll1.isEnd) return; if (gScroll1.touchStatus == 1 && gScroll1.scrollToNext && !gScroll1.loading) { console.log(`申请第${gScroll1.page}列表数据`); gScroll1.loading = true; //申请下一页数据 setTimeout(function () { gScroll1.page++; let page = gScroll1.page; let addHtmlStr = ''; for (let index = 0; index < gScroll1.pageSize; index++) { addHtmlStr += ` <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div> <div class="weui-cell__bd"> <p>题目文字${(page-1)*gScroll1.pageSize+index+1}</p> </div> <div class="weui-cell__ft">阐明文字${(page-1)*gScroll1.pageSize+index+1}</div> </div>`; } $('.g-scroll-container .weui-loadmore').before(addHtmlStr); gScroll1.loading = false; if (gScroll1.page == gScroll1.total) { gScroll1.isEnd = true; $(".g-scroll-container .weui-loadmore").remove(); } }, 2000); gScroll1.scrollToNext = false; } gScroll1.touchStatus = 0; }); /* 第一个tab的下拉滚动刷新 END */ /* 第2个tab的下拉滚动刷新 */ let gScroll2 = { contentSelector: '.g-scroll-content-2', containerSelector: '.g-scroll-container-2', touchStatus: 0, // 0 init 1 move 以后状态，move为正在touchmove page: 1, //页数 pageSize: 8, //每页条数 total: 5, //总页数 scrollToNext: false, //滚动满足刷新下一页的标记 isEnd: false, //是否曾经滑到底部了，用于判断是否解决滚动 (如果只有一页，需设置为true，无需滚动加载) loading: false //正在加载数据的标记 } //监听手指初始触碰 $('.g-scroll-content-2').on("touchstart", function (e) { if (gScroll2.isEnd) return; gScroll2.touchStatus = 1; }); //判断向上时，如果滚动条在顶部，那么逐步减少下拉刷新的高度 $('.g-scroll-content-2').on("touchmove", function (e) { if (gScroll2.isEnd) return; if (!gScroll2.scrollToNext) { var aa = $('.g-scroll-container-2').height(); var bb = $(this).scrollTop(); var cc = $(this).height(); var dd = aa - bb - cc; if (dd < 50) { gScroll2.scrollToNext = true; } } }); //下拉刷新高度达到肯定值之后刷新页面 $(".g-scroll-content-2").on("touchend", function (e) { if (gScroll2.isEnd) return; if (gScroll2.touchStatus == 1 && gScroll2.scrollToNext && !gScroll2.loading) { console.log(`申请第${gScroll2.page}列表数据`); gScroll2.loading = true; //申请下一页数据 setTimeout(function () { gScroll2.page++; let page = gScroll2.page; let addHtmlStr = ''; for (let index = 0; index < gScroll2.pageSize; index++) { addHtmlStr += ` <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__bd"> <p>题目文字${(page-1)*gScroll2.pageSize+index+1}</p> </div> </div>`; } $('.g-scroll-container-2 .weui-loadmore').before(addHtmlStr); gScroll2.loading = false; if (gScroll2.page == gScroll2.total) { gScroll2.isEnd = true; $(".g-scroll-container-2 .weui-loadmore").remove(); } }, 2000); gScroll2.scrollToNext = false; } gScroll2.touchStatus = 0; }); /* 第2个tab的下拉滚动刷新 END */ });其余
好久没写比拟原始的H5界面了，WeUI是微信原生框架，能够疾速搭建合乎挪动端（类APP）的UI的界面和实现根本的交互。
想起很晚期的时候用过framework7框架，官网上有残缺的文档和例子。
WeUI是间接给出样例和代码，没有独自给文档和阐明。
这里找到一个中文文档（WeUI.js的中文文档），不知是否始终有更新，也能够参考下。
参考
- zepto.js中文文档
- WeUI代码库
- WeUI疾速入门
- WeUI组件总览
- 基于zepto的挪动端轻量级日期插件
- 基于zepto写的几个罕用小东西（toast、加载器、上拉加载、下拉刷新）