备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

微信WeUI扩展组件

2018-08-31 2659
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 主要包括 下拉刷新pullToRefreshdownRefresh.html主要的代码是$(document.body).pullToRefresh(); 下拉刷新 释放刷新 正在刷新 $(document.

 

主要包括

 

下拉刷新pullToRefresh

downRefresh.html

主要的代码是$(document.body).pullToRefresh();

    <div class="weui-pull-to-refresh__layer">
      <div class='weui-pull-to-refresh__arrow'></div>
      <div class='weui-pull-to-refresh__preloader'></div>
      <div class="down">下拉刷新</div>
      <div class="up">释放刷新</div>
      <div class="refresh">正在刷新</div>
    </div>

</script>
        <script>
      $(document.body).pullToRefresh(function() {
        setTimeout(function() {
          $(document.body).pullToRefreshDone();
        }, 2000);
        
      });

    </script>

　　详细代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
</head>
<body ontouchstart>
    <!-- Your Code -->
    <div class="weui-pull-to-refresh__layer">
      <div class='weui-pull-to-refresh__arrow'></div>
      <div class='weui-pull-to-refresh__preloader'></div>
      <div class="down">下拉刷新</div>
      <div class="up">释放刷新</div>
      <div class="refresh">正在刷新</div>
    </div>
    
        <h1 class="demos-title">下拉刷新</h1>
    <p>Time: <span id="time">下拉我试试</span></p>
    <p>
      <a href="javascript:;" class="weui-btn weui-btn_primary" id="trigger">通过JS触发下拉刷新</a>
    </p>
    <div id="list" class='demos-content-padded'>
      
      <p>《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材，已被全世界100多个国家的1200多所大学用作教材。</p>      
      
    </div>
    
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
        <script>
      $(document.body).pullToRefresh(function() {
        setTimeout(function() {
          $("#time").text(new Date);
          $(document.body).pullToRefreshDone();
        }, 2000);
        $("#list").append("<div class='weui-btn weui-btn_default'>下拉刷新的内容</div>");
      });
      $("#trigger").click(function () {
        $(document.body).pullToRefresh('triggerPullToRefresh');
        
        $("#list").append("<div class='weui-btn weui-btn_default'>js触发器新加载的内容</div>");
      });
    </script>
</body>
</html>
View Code

 

滚动刷新infinite（）

主要代码：

    <div class="weui-loadmore">
      <i class="weui-loading"></i>
      <span class="weui-loadmore__tips">正在加载</span>
    </div>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
    <script>
      var loading = false;
      $(document.body).infinite().on("infinite", function() {
        if(loading) return;
        loading = true;
        setTimeout(function() {
          $("#list").append("<div class='weui-btn weui-btn_primary'>我是加载的新内容。</div>");
          loading = false;
        }, 2000);//模拟延迟
      });
    </script>

　　详细代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
</head>
<body ontouchstart>
    <!-- Your Code -->
        <h1 class="demos-title">滚动加载</h1>
    <div id="list" class='demos-content-padded'>
      <p>《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材，已被全世界100多个国家的1200多所大学用作教材。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》的最新版全面而系统地介绍了人工智能的理论和实践，阐述了人工智能领域的核心内容，并深入介绍了各个主要的研究方向。全书分为七大部分：第Ⅰ部分“人工智能”，第Ⅱ部分“问题求解”，第Ⅲ部分“知识、推理与规划”，第Ⅳ部分“不确定知识与推理”，第Ⅴ部分“学习”，第Ⅵ部分“通信、感知与行动”，第Ⅶ部分“结论”。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》既详细介绍了人工智能的基本概念、思想和算法，还描述了其各个研究方向最前沿的进展，同时收集整理了详实的历史文献与事件。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》适合于不同层次和领域的研究人员及学生，是高等院校本科生和研究生人工智能课的首选教材，也是相关领域的科研与工程技术人员的重要参考书。</p>
      
      <p>《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材，已被全世界100多个国家的1200多所大学用作教材。</p>
    </div>
    
    <div class="weui-loadmore">
      <i class="weui-loading"></i>
      <span class="weui-loadmore__tips">正在加载</span>
    </div>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
    <script>
      var loading = false;
      $(document.body).infinite().on("infinite", function() {
        if(loading) return;
        loading = true;
        setTimeout(function() {
          $("#list").append("<div class='weui-btn weui-btn_primary'>我是加载的新内容。</div>");
          loading = false;
        }, 2000);//模拟延迟
      });
    </script>
</body>
</html>
View Code

 

拾取器picker

主要代码：

      $('#Job').picker({
      	title:'请选择您的职业',
      	cols:[
      		{
      			values:['神圣','邪恶']
      		},
      		{
      			values:['法师','战士','辅助','NPC']
      		},
      		{
      			values:['人类','兽类','禽兽']
      		}
      	]
      });

　　详细代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
</head>
<body ontouchstart>
    <!-- Your Code -->
        <header class='demos-header'>
      <h1 class="demos-title">选择器</h1>
    </header>

    
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="name" class="weui-label">称呼</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="name" type="text" value="">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="date" class="weui-label">手机</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="mobile" type="text" value="">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="date" class="weui-label">职业</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="Job" type="text" value="">
        </div>
      </div>
    </div>
    
        <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="inline" class="weui-label">内联显示</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="inline" type="text" value="">
        </div>
      </div>
    </div>
    <div id="picker-container"></div>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
    <script>
            
      $('#Job').picker({
          title:'请选择您的职业',
          cols:[
              {
                  values:['神圣','邪恶']
              },
              {
                  values:['法师','战士','辅助','NPC']
              },
              {
                  values:['人类','兽类','禽兽']
              }
          ]
      });
      
      $("#mobile").picker({
        title: "请选择您的手机",
        cols: [
          {
            textAlign: 'center',
            values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
          }
        ],
        onChange: function(p, v, dv) {
          console.log(p, v, dv);
        },
        onClose: function(p, v, d) {
          console.log("close");
        }
      });
      $("#name").picker({
        title: "怎么称呼您？",
        cols: [
          {
            textAlign: 'center',
            values: ['Mr', 'Ms']
          },
          {
            textAlign: 'center',
            values: ['Amy', 'Bob', 'Cat', 'Dog', 'Ella', 'Fox', 'Google']
          }
        ]
      });

      $("#inline").picker({
        container: '#picker-container',
        cols: [
          {
            textAlign: 'center',
            values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
          }
        ],
      });
    </script>
</body>
</html>
View Code

 

普通下拉选择器select

主要代码：

      $("#job").select({
        title: "选择职业",
        items: ["法官", "医生", "猎人", "学生", "记者", "其他"],
      });

　　详细代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
</head>
<body ontouchstart>
    <!-- Your Code -->
        <header class='demos-header'>
      <h1 class="demos-title">Select</h1>
    </header>

    
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="name" class="weui-label">职业</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="job" type="text" value="请选择">
        </div>
      </div>

      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="name" class="weui-label">手机</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="mobile" type="text" value="请选择">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="name" class="weui-label">爱好</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="in" type="text" value="画画,唱歌,打球">
        </div>
      </div>
    </div>
    
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
        <script>
      $("#job").select({
        title: "选择职业",
        items: ["法官", "医生", "猎人", "学生", "记者", "其他"],
      });
      $("#mobile").select({
        title: "选择手机",
        items: [
          {
            title: "iPhone 3GS",
            value: "001",
          },
          {
            title: "iPhone 5",
            value: "002",
          },
          {
            title: "iPhone 5S",
            value: "003",
          },
          {
            title: "iPhone 6",
            value: "004",
          },
          {
            title: "iPhone 6S",
            value: "005",
          },
          {
            title: "iPhone 6P",
            value: "006",
          },
          {
            title: "iPhone 6SP",
            value: "007",
          },
          {
            title: "iPhone SE",
            value: "008",
          },
          {
            title: "iPhone 7",
            value: "009"
          }
        ]
      });
      $("#in").select({
        title: "您的爱好",
        multi: true,
        min: 2,
        max: 3,
        items: [
          {
            title: "画画",
            value: 1,
            description: "额外的数据1"
          },
          {
            title: "打球",
            value: 2,
            description: "额外的数据2"
          },
          {
            title: "唱歌",
            value: 3,
            description: "额外的数据3"
          },
          {
            title: "游泳",
            value: 4,
            description: "额外的数据4"
          },
          {
            title: "健身",
            value: 5,
            description: "额外的数据5"
          },
          {
            title: "不能选睡觉",
            value: 6,
            description: "额外的数据6"
          },
        ],
        beforeClose: function(values, titles) {
            console.log(values);//1,2,3
            console.log(titles);//画画,打球,唱歌
          if(values.indexOf("6") !== -1) {
            $.toast("不能选睡觉", "cancel");
            return false;
          }
          return true;
        },
        onChange: function(d) {
          console.log(d);
        },
        onClose: function (d) {
          console.log('close')
        }
      });
    </script>
</body>
</html>
View Code

 

 

 城市选择器cityPicker

需要引入一个特殊的js

主要代码，就是用cityPicker方法：

$("#end").cityPicker({
        title: "选择目的地"
      });

　　详细代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
</head>
<body ontouchstart>
    <!-- Your Code -->
        <header class='demos-header'>
      <h1 class="demos-title">City Picker</h1>
    </header>

    
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="name" class="weui-label">发出地</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="start" type="text" value="湖北省 武汉市 武昌区">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="date" class="weui-label">目的地</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="end" type="text" value="">
        </div>
      </div>
    </div>
        <h2 class="demos-second-title">只选择城市</h2>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="home-city" class="weui-label">城市</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="home-city" type="text">
        </div>
      </div>
    </div>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/city-picker.js" type="text/javascript" charset="utf-8"></script>
        <script>
      $("#start").cityPicker({
        title: "选择出发地",
        onChange: function (picker, values, displayValues) {
          console.log(values, displayValues);
        }
      });
      $("#end").cityPicker({
        title: "选择目的地"
      });
      $("#home-city").cityPicker({
        title: "选择目的地",
        showDistrict: false,
        onChange: function (picker, values, displayValues) {
          console.log(values, displayValues);
        }
      });
    </script>
</body>
</html>
View Code

 

cityPicker的底层实现是基于picker的

 使用$.fn.functionName=function(){} 来定义自定义js函数

$.fn.cityPicker=function(param){

　　return this.each(function(){

　　　　$(this).picker(p);

　　});

}

 

时间选择器datetimePicker

详细代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
</head>
<body ontouchstart>
    <!-- Your Code -->
    <header class='demos-header'>
      <h1 class="demos-title">时间选择</h1>
      <div class="demos-sub-title">基于picker</div>
    </header>

    <!--微信团队2个空格的缩进，真的让人恼火-->
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="time" class="weui-label">默认配置</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="time" type="text" value="">
        </div>
      </div>
      
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="time-format" class="weui-label">限制年月</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="years-monthes" type="text" value="2017-06-20 12:00">
        </div>
      </div>
    </div>
    
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="time-inline" class="weui-label">内联显示</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="time-inline" type="text" value="">
        </div>
      </div>
    </div>

    <div id="time-container"></div>
    
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $("#time").datetimePicker();
      $("#years-monthes").datetimePicker({
        title: '限定年月',
        years: [2017, 2018],
        monthes: ['06', '07'],
        onChange: function (picker, values, displayValues) {
          console.log(values);
        }
      });
      $("#time-inline").datetimePicker({
        container: '#time-container'
      })
    </script>
</body>
</html>
View Code

 

 

日历控件calendar

主要代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
</head>
<body ontouchstart>
    <!-- Your Code -->
    <header class='demos-header'>
      <h1 class="demos-title">日历</h1>
    </header>
    
      
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="date" class="weui-label">日期</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="date" type="text">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="date-multiple" class="weui-label">多选</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="date-multiple" type="text" value="">
        </div>
      </div>
    </div>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $("#date").calendar();
      $("#date-multiple").calendar({
          multiple:true
      });
      
    </script>
</body>
</html>
View Code

 

 

模拟顶部的消息提醒noti

 

主要代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
</head>
<body ontouchstart>
    <!-- Your Code -->
        <header class='demos-header'>
      <h1 class="demos-title">Notification</h1>
    </header>

    <div class='demos-content-padded'>
      <a href="javascript:;" id='show-notification' class="weui-btn weui-btn_primary">显示通知</a>
    </div>
    
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $("#show-notification").on("click",function () {
            $.noti({
              title: "中奖啦！",
              text: "点击领取腾讯王者荣耀杯二等奖！",
              media: "<img src='img/present.png' />",
              data: {
                message: "逗你玩的!"
              },
              time: 3000,
              onClick: function(data) {
                $.alert(data.message);
              }
            });
        });
    </script>
</body>
</html>
View Code

 

 

底部弹框层

其实就是通过样式和js解决的

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
</head>
<body ontouchstart>
    <!-- Your Code -->
        <header class='demos-header'>
      <h1 class="demos-title">底部弹框层</h1>
    </header>

    <div class='demos-content-padded'>
      <a href="javascript:;" class="weui-btn weui-btn_primary open-popup" data-target="#full">显示全屏(默认)Popup</a>
      <a href="javascript:;" class="weui-btn weui-btn_primary open-popup" data-target="#half">显示底部的Popup</a>
    </div>
    
    <div id="full" class='weui-popup__container'>
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <header class='demos-header'>
          <h2 class="demos-second-title">关于 jQuery WeUI</h2>
          <p class="demos-sub-title">By 言川 @2016/03/30</p>
        </header>
        <article class="weui-article">
          <h1>大标题</h1>
          <section>
            <h2 class="title">章标题</h2>
            <section>
              <h3>1.1 节标题</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
              </p>
              <p>
                <!--<img src="./images/pic_article.png" alt="">
                <img src="./images/pic_article.png" alt="">-->
              </p>
            </section>
            <section>
              <h3>1.2 节标题</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            </section>
          </section>
        </article>
        <a href="javascript:;" class="weui-btn weui-btn_primary close-popup">关闭</a>
      </div>
    </div>
    
    <div id="half" class='weui-popup__container popup-bottom'>
      <div class="weui-popup__overlay">
          <!--<img src="img/avatar.jpg" />-->
      </div>
      <div class="weui-popup__modal">
        <div class="toolbar">
          <div class="toolbar-inner">
            <a href="javascript:;" class="picker-button close-popup">关闭</a>
            <h1 class="title">点击第一行试试看</h1>
          </div>
        </div>
        <div class="modal-content">
          <div class="weui-grids">
            <a href="javascript:$.alert('发布《王者荣耀》');" class="weui-grid js_grid" data-id="dialog">
              <div class="weui-grid__icon">
                <img src="img/icon_nav_dialog.png" alt="">
              </div>
              <p class="weui-grid__label">
                发布
              </p>
            </a>
            <a href="javascript:$.alert('编辑《斗破苍穹》');" class="weui-grid js_grid" data-id="progress">
              <div class="weui-grid__icon">
                <img src="img/icon_nav_progress.png" alt="">
              </div>
              <p class="weui-grid__label">
                编辑
              </p>
            </a>
            <a href="javascript:$.confirm('保存吗');" class="weui-grid js_grid" data-id="msg">
              <div class="weui-grid__icon">
                <img src="img/icon_nav_msg.png" alt="">
              </div>
              <p class="weui-grid__label">
                保存
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid" data-id="dialog">
              <div class="weui-grid__icon">
                <img src="img/icon_nav_dialog.png" alt="">
              </div>
              <p class="weui-grid__label">
                发布
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid" data-id="progress">
              <div class="weui-grid__icon">
                <img src="img/icon_nav_progress.png" alt="">
              </div>
              <p class="weui-grid__label">
                编辑
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid" data-id="msg">
              <div class="weui-grid__icon">
                <img src="img/icon_nav_msg.png" alt="">
              </div>
              <p class="weui-grid__label">
                保存
              </p>
            </a>
          </div>
        </div>
      </div>
    </div>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
    
</body>
</html>
View Code

 

 

图片滚动swiper

需要引入一个特殊js

主要代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
        <style>
      .swiper-container {
        width: 100%;
      } 

      .swiper-container img {
        display: block;
        width: 100%;
      }
    </style>
</head>
<body ontouchstart>
    <!-- Your Code -->
        <div class="swiper-container">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide"><img src="img/swiper-1.jpg" /></div>
        <div class="swiper-slide"><img src="img/avatar.jpg" /></div>
        <div class="swiper-slide"><img src="img/swiper-3.jpg" /></div>
      </div>
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>
    </div>
    
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
    <script>
      $(".swiper-container").swiper({
        loop: true,
        autoplay: 3000
      });
    </script>
</body>
</html>

　　

图片浏览器（基于swiper）

 

 

photoBrowser基于swiper组件

主要代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
</head>
<body ontouchstart>
    <!-- Your Code -->
        <header class='demos-header'>
      <h1 class="demos-title">图片浏览器</h1>
    </header>

    <div class='demos-content-padded'>
      <a href="javascript:;" class="weui-btn weui-btn_primary" id="pb1">只有图片</a>
      <a href="javascript:;" class="weui-btn weui-btn_primary" id="pb2">带说明文案</a>
    </div>
    
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
    <script>

      var pb1 = $.photoBrowser({
        items: [
          "img/swiper-1.jpg",
          "img/swiper-2.jpg",
          "img/swiper-3.jpg",
          "img/swiper-4.jpg"
        ],

        onSlideChange: function(index) {
          console.log(this, index);
        },

        onOpen: function() {
          console.log("onOpen", this);
        },
        onClose: function() {
          console.log("onClose", this);
        }
      });
      $("#pb1").click(function() {
        pb1.open(2);
      });
      var pb2 = $.photoBrowser({
        items: [
          {
            image: "img/swiper-1.jpg",
            caption: "尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。在浏览器新标签页中打开它，跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装，查看安装教程。"
          },
          {
            image: "img/swiper-2.jpg",
            caption: "组件（Component）是 Vue.js 最强大的功能之一。"
          },
          {
            image: "img/swiper-3.jpg",
            caption: "组件可以扩展 HTML 元素，封装可重用的代码"
          },
          {
            image: "img/swiper-4.jpg",
            caption: "在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。"
          }
        ],
        initIndex: 2
      });
      $("#pb2").click(function() {
        pb2.open();
      });
    </script>
</body>
</html>
View Code

 

 

购物车的计数器

基本上就是样式+js实现，增减的逻辑js要自己写

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
    <style type="text/css">
        .img-title{
            width: 20px;
            display: block;
        }
    </style>
</head>
<body ontouchstart>
    <!-- Your Code -->
    <header class='demos-header'>
      <h1 class="demos-title">Count/计数器</h1>
    </header>
    <div class="bd">
      <div class="page__bd">
        <div class="weui-cells__title">带计数器的列表项</div>
        <div class="weui-cells">
          <div class="weui-cell">
            <div class="weui-cell__bd">
              <p>优衣库轻薄羽绒服</p>
            </div>
            <div class="weui-cell__ft">
              <div class="weui-count">
                <a class="weui-count__btn weui-count__decrease"></a>
                <input class="weui-count__number" type="number" value="1" />
                <a class="weui-count__btn weui-count__increase"></a>
              </div>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
                <img src="img/avatar.jpg" class="img-title"/>                
            </div>
            <div class="weui-cell__bd">
              <p>三叶草男士运动鞋</p>
            </div>
            <div class="weui-cell__ft">
              <div class="weui-count">
                <a class="weui-count__btn weui-count__decrease"></a>
                <input class="weui-count__number" type="number" value="2" />
                <a class="weui-count__btn weui-count__increase"></a>
              </div>
            </div>
          </div>
          <div class="weui-cell weui-cell_swiped">
            <div class="weui-cell__bd">
              <div class="weui-cell">
                <div class="weui-cell__bd">
                  <p>可滑动删除</p>
                </div>
                <div class="weui-cell__ft">
                  <div class="weui-count">
                    <a class="weui-count__btn weui-count__decrease"></a>
                    <input class="weui-count__number" type="number" value="1" />
                    <a class="weui-count__btn weui-count__increase"></a>
                  </div>
                </div>
              </div>
            </div>
            <div class="weui-cell__ft">
              <a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:">删除</a>
              <a class="weui-swiped-btn weui-swiped-btn_default close-swipeout" href="javascript:">关闭</a>
            </div>
          </div>
        </div>
    
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
    <script>
        add_delete();
        slider_operate();
        
        //封装成方法，便于调用
        function add_delete () {
          var MAX = 99, MIN = 1;
          $('.weui-count__decrease').click(function (e) {
            var $input = $(e.currentTarget).parent().find('.weui-count__number');
            console.log($input.val());
            var number = parseInt($input.val() || "0") - 1
            if (number < MIN) number = MIN;
            $input.val(number)
          });
          $('.weui-count__increase').click(function (e) {
            var $input = $(e.currentTarget).parent().find('.weui-count__number');
            var number = parseInt($input.val() || "0") + 1
            if (number > MAX) number = MAX;
            $input.val(number)
          });
        }
        
        //封装成方法，便于调用    
        function slider_operate () {
          $('.delete-swipeout').click(function () {
            $(this).parents('.weui-cell').remove()
          });
          $('.close-swipeout').click(function () {
            $(this).parents('.weui-cell').swipeout('close')
          });
        }
            

      
    </script>
</body>
</html>
View Code

 

文章标签：
前端开发
iOS开发
JavaScript
人工智能
Web App开发
关键词：
微信组件
乌云上
目录
相关文章
你挚爱的强哥
|
10天前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
你挚爱的强哥
25 0
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
我是夜阑的狗
|
1月前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器（五十三）
【微信小程序】-- 表单组件 - picker 实现日期选择器（五十三）
我是夜阑的狗
48 1
我是夜阑的狗
|
1月前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 （四十）
【微信小程序】-- 自定义组件总结 （四十）
我是夜阑的狗
28 1
我是夜阑的狗
|
1月前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - behaviors（三十九）
【微信小程序】-- 自定义组件 - behaviors（三十九）
我是夜阑的狗
28 0
我是夜阑的狗
|
1月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽（三十七）
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽（三十七）
我是夜阑的狗
33 0
我是夜阑的狗
|
1月前
|
小程序
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期（三十六）
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期（三十六）
我是夜阑的狗
35 0
我是夜阑的狗
|
1月前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - 数据监听器 （三十四）
【微信小程序】-- 自定义组件 - 数据监听器 （三十四）
我是夜阑的狗
24 0
我是夜阑的狗
|
1月前
|
存储 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 数据、方法和属性（三十三）
【微信小程序】-- 自定义组件 -- 数据、方法和属性（三十三）
我是夜阑的狗
35 0
我是夜阑的狗
|
1月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 创建与引用 &样式（三十二）
【微信小程序】-- 自定义组件 -- 创建与引用 &样式（三十二）
我是夜阑的狗
27 0
我是夜阑的狗
|
1月前
|
小程序
【微信小程序】-- 其它常用组件介绍 -- button & image（八）
【微信小程序】-- 其它常用组件介绍 -- button & image（八）
我是夜阑的狗
21 0

热门文章

最新文章

  • 1
    微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
  • 2
    微信网页授权之使用完整服务解决方案
  • 3
    【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
  • 4
    微信团队分享：微信后端海量数据查询从1000ms降到100ms的技术实践
  • 5
    微信小程序全栈开发之性能优化策略
  • 6
    vue实现将自己网站（h5链接）分享到微信中形成小卡片（超详细）
  • 7
    基于springboot的微信公众号管理系统（支持多公众号接入）
  • 8
    java中实现定时给微信群中发送每日简报
  • 9
    mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
  • 10
    在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
  • 1
    【微信小程序】-- 表单组件 - picker 实现日期选择器（五十三）
    48
  • 2
    【微信小程序】TypeError: Cannot read property ‘get‘ of undefined & Error: MiniProgramError
    72
  • 3
    【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果（五十二）
    44
  • 4
    【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果（五十一）
    45
  • 5
    【微信小程序】-- 使用 Git 管理项目（五十）
    33
  • 6
    【微信小程序】-- uni-app 项目创建 & 目录结构讲解（四十九）
    46
  • 7
    【微信小程序】-- 配置uni-app的开发环境（四十八）
    31
  • 8
    【微信小程序】-- npm包总结 --- 基础篇完结（四十七）
    38
  • 9
    【微信小程序】-- 案例 - 自定义 tabBar（四十六）
    37
  • 10
    【微信小程序】-- 分包 - 独立分包 & 分包预下载（四十五）
    28

    • 相关电子书

    更多
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践
  • 微信高效运维之路

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    阿里云oss简介和使用流程
    为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
    产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
    解决方案技术解决方案
    文档与社区文档开发者社区天池大赛培训与认证
    权益中心免费试用高校计划企业扶持计划推荐返现计划
    支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
    关注阿里云
    关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
    阿里云APP阿里云微信
    联系我们：4008013260
    法律声明Cookies政策廉正举报安全举报联系我们加入我们
    阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
    © 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
    浙公网安备 33010602009975号浙B2-20080101-4