最近项目需要个具有开关效果的界面，然后查了下微信weui的官方文档，weui库更新了，所以下面用到的weui样式库weui.css和example.css请前往https://github.com/weui/weui下载。记得是最新版本，不要下载错了。
一，引入css文件
<link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css">
二，开关html代码
<div class="weui-cells__title">信息订阅</div> <div class="weui-cells weui-cells_form"> <div class="weui-cell weui-cell_switch"> <div class="weui-cell__bd">通知1</div> <div class="weui-cell__ft"> <input class="weui-switch" type="checkbox"/> </div> </div> <div class="weui-cell weui-cell_switch"> <div class="weui-cell__bd">提醒</div> <div class="weui-cell__ft"> <input class="weui-switch" type="checkbox"/> </div> </div> <div class="weui-cell weui-cell_switch"> <div class="weui-cell__bd">通知2</div> <div class="weui-cell__ft"> <input class="weui-switch" type="checkbox"/> </div> </div> </div>
效果
demo.html页面代码
<!DOCTYPE html> <html class="ie"><!--<![endif]--> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css"> </head> <body onselectstart="return false"> <div class="weui-cells__title">信息订阅</div> <div class="weui-cells weui-cells_form"> <div class="weui-cell weui-cell_switch"> <div class="weui-cell__bd">通知1</div> <div class="weui-cell__ft"> <input class="weui-switch" type="checkbox"/> </div> </div> <div class="weui-cell weui-cell_switch"> <div class="weui-cell__bd">提醒</div> <div class="weui-cell__ft"> <input class="weui-switch" type="checkbox"/> </div> </div> <div class="weui-cell weui-cell_switch"> <div class="weui-cell__bd">通知2</div> <div class="weui-cell__ft"> <input class="weui-switch" type="checkbox"/> </div> </div> </div> </body> </html>
此文章本站原创，地址 https://www.vxzsk.com/663.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：spring内部bean的注入
下一篇：java web并发处理规范
^