微信weui开关switch效果

2018年03月15日 08:24 | 3499次浏览 作者原创 版权保护

最近项目需要个具有开关效果的界面,然后查了下微信weui的官方文档,weui库更新了,所以下面用到的weui样式库weui.cssexample.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>


效果

微信weui

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   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程