背景
敌人找我帮忙弄挪动端 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、加载器、上拉加载、下拉刷新）