微信WeUI擴展組件

時間  2019-11-19
標籤 微信 weui 擴展 組件 简体版
原文   原文鏈接

 

主要包括

 

下拉刷新pullToRefresh

downRefresh.htmljavascript

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

    <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>

　　詳細代碼html

<!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（）

主要代碼：java

    <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>

　　詳細代碼jquery

<!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: ["法官", "醫生", "獵人", "學生", "記者", "其餘"],
      });

　　詳細代碼：app

<!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

須要引入一個特殊的jside

主要代碼，就是用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
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程