小程序模板網(wǎng)

微信小程序?qū)W習(xí)實(shí)踐:swiper的使用,checkbox的使用

發(fā)布時(shí)間:2018-03-28 14:50 所屬欄目:小程序開(kāi)發(fā)教程
第一部分:入門(mén)實(shí)踐

1.下載微信小程序編輯器:下載微信小程序編輯器

2.創(chuàng)建小程序應(yīng)用:打開(kāi)剛才下載的dmg,用微信掃面二維碼登陸。點(diǎn)擊本地小程序項(xiàng)目,就可以開(kāi)始開(kāi)發(fā)了。

3.先介紹下目錄結(jié)構(gòu):

 

pages文件夾中放的都是頁(yè)面,app.js相當(dāng)于iOS的appdelegate,app.json就是app的配置,app.wxss就是css樣式文件。
每一個(gè)頁(yè)面都單獨(dú)有一個(gè)js,json,wxss文件。
4.app.json文件分析


{//所有的頁(yè)面都在這里列出來(lái)
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/button/button"
  ],
  "window":{ //app的樣式
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

5.先做一個(gè)小demo(js,json,wxml,wxss都是新建的)
代碼:


//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
  data:{
    count:0,
    text: '加載了了0次',
    loadingstatus: false,
  },
  onLoad:function(options){
    // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
    console.log("onLoad");

  },
  onReady:function(){
    // 頁(yè)面渲染完成
    console.log("onReady");
  },
  onShow:function(){
    // 頁(yè)面顯示
    console.log("onShow");
  },
  onHide:function(){
    // 頁(yè)面隱藏
    console.log("onHide");
  },
  onUnload:function(){
    // 頁(yè)面關(guān)閉
    console.log("onUnload");
  },
  button1click: function(){
   var that = this;
   that.data.count++;
   that.setData({ //更改屬性的值
       text:'加載了'+that.data.count+'次',
       loadingstatus:that.data.count%2 == 0 ? true:false,
   })
  },
})

//這里的data就是頁(yè)面的數(shù)據(jù)和函數(shù),
onShow,onHide,onReady,onUnload都是生命周期函數(shù),
button1Click是button的click函數(shù)
這框架是data和頁(yè)面的綁定起來(lái)的,只要改變data的值,頁(yè)面就會(huì)隨著變化,這點(diǎn)和iOS有點(diǎn)不同。

button.json 文件
{
     "navigationBarTitleText": "ButtonDemo" 這是頁(yè)面的title
}

button.wxml文件

<view class="container"> 
    <view class="button-wrapper">
    <button type="default" bindtap="button1click"  size="default"  
    loading="{{loadingstatus}}" > 點(diǎn)我
    </button>
     </view>
<text class="countClick" id="text1">{{text}}
</text>
</view>

button.wxss

.countClick{
    margin-top: 100rpx;
    width: 200rpx;
    height: 50rpx;
    text-align: center;
    font-size: 1em;
    background-color: cadetblue;
}

 bindtap="button1click"  綁定點(diǎn)擊事件到buttonclick函數(shù)
{{text}}   {{data中的屬性}}

今天還看到一段比較好玩的代碼:


for (var i = 0; i < types.length; ++i) {
  (function(type) {
    pageObject[type] = function(e) {
      var key = type + 'Size'
      var changedData = {}
      changedData[key] =
        this.data[key] === 'default' ? 'mini' : 'default'
      this.setData(changedData)
    }
  })(types[i])

可能做iOS的沒(méi)看過(guò)js的人這點(diǎn)看不太懂,我也是新手,哪里說(shuō)的不對(duì),歡迎前端大神指正。
大概意思是:


for (var i = 0; i < types.length; ++i) { 循環(huán)數(shù)組
  (function(type) { //寫(xiě)法js(function)(item)
    pageObject[type] = function(e) { //添加屬性函數(shù) 就是增加了幾個(gè)函數(shù)。
      var key = type + 'Size' //拼接字符串
      var changedData = {} //字典
      changedData[key] = //字典賦值
        this.data[key] === 'default' ? 'mini' : 'default'
      this.setData(changedData) //相當(dāng)于iOS的kvo用hash值的方式給自己的屬性賦值
    }
  })(types[i]) //執(zhí)行函數(shù)
第二部分:swiper的使用

這個(gè)類(lèi)似iOS的滾動(dòng)視圖,里邊也可以放一下其他的東西。
先講一下屬性:

屬性名 類(lèi)型 默認(rèn)值 說(shuō)明
indicator-dots Boolean false 是否顯示面板指示點(diǎn)
autoplay Boolean false 是否自動(dòng)切換
current Number 0 當(dāng)前所在頁(yè)面的 index
interval Number 5000 自動(dòng)切換時(shí)間間隔
duration Number 1000 滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng)
bindchange EventHandle   current 改變時(shí)會(huì)觸發(fā) change 事件,event.detail = {current: current}

swiper.js文件


var app = getApp();
Page({
  data:{
    indicatordos:true,
    autoplay:true,
/*圖片數(shù)組*/
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
      'http://imgsrc.baidu.com/forum/pic/item/1080fc8b87d6277f026c80b428381f30e824fc46.jpg',
      'http://imgsrc.baidu.com/forum/pic/item/2eadcbef76094b366ac0bf0da3cc7cd98c109d84.jpg',
      'http://img1.tgbusdata.cn/v2/thumb/jpg/MGNlNiw3MzAsNzMwLDQsMSwxLC0xLDAscms1MA==/u/olpic.tgbusdata.cn/uploads/allimg/130124/62-130124160054.jpg'
    ],
    vertical:true,
  },

  displaychange:function(event){
      console.log(event.detail.current);//輸出來(lái)當(dāng)前swiper-item的index
   },

  changeautodisplay:function(){
    this.setData({
      autoplay:!this.data.autoplay//設(shè)置是否自動(dòng)播放
  })
  },
  changeindicator:function(){
    this.setData({
  indicatordos:!this.data.indicatordos//隱藏圖片那個(gè)點(diǎn)
})
  },
  changevertical:function(){
    this.setData({//設(shè)置水平方向
      vertical:!this.data.vertical
    })
  }

})

swiper.xml文件


<view class="container">
    <view class="swiperview">
        <swiper class="swiperitem" indicator-dots="{{indicatordos}}" autoplay="{{autoplay}}"
          bindchange="displaychange" duration="1000" interval="2000"
          vertical="{{vertical}}"
        >
        <block wx:for="{{imgUrls}}">
            <swiper-item>
                <image src="{{item}}"></image>
            </swiper-item>
        </block>
        </swiper>
    </view>
    <view vlass="bottomview">
        <button type="default" bindtap="changeautodisplay" class="bottomButton">autodisplay:{{autoplay?"YES":"NO"}}</button>
        <button type="default" bindtap="changeindicator" class="bottomButton">indicatordots:{{autoplay?"YES":"NO"}}</button>
        <button type="default" bindtap="changevertical" class="bottomButton">水平:{{autoplay?"YES":"NO"}}</button>
//這里邊用了一個(gè)簡(jiǎn)單的判斷語(yǔ)句 :{{autoplay?"YES":"NO"
    </view>
</view>

效果如下:

 
第三部分:checkbox的使用

其實(shí)就是復(fù)選框:

 

下邊用了text顯示了當(dāng)前選中的name。
js文件


首先要設(shè)置data的list
Page({
  data:{
     items: [
      {name: 'USA', value: '美國(guó)'},
      {name: 'CHN', value: '中國(guó)', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英國(guó)'},
      {name: 'TUR', value: '法國(guó)'},
    ],
    text:'',//用來(lái)顯示選中的box
  },

  onShow:function(){
    // 頁(yè)面顯示 第一次進(jìn)入頁(yè)面統(tǒng)計(jì)選中的box 調(diào)用函數(shù)。
    this.check();
  },

  change:function(e){
      console.log(e.detail.value);
      var te="暫時(shí)沒(méi)選中";
      if(e.detail.value.length == 0)
        { 
        } else {
         te = e.detail.value;
        }
         this.setData({
        text:te
      })

  },
********遍歷是否有選中的***********
  check:function(){
    var te="";//遍歷是否有選中的
    for(var i = 0;i < this.data.items.length;i ++){
      var item = this.data.items[i];
      if(item.checked){ //如果選中 加到字符串中
        te += item.value;
      }
    }
      if(te.length == 0)
        { 
         te = "暫時(shí)沒(méi)選中" ;
        }
         this.setData({
        text:te
      })
    }
})

xml文件


<view class = "contain">
    <view class="bd">
        <checkbox-group bindchange="change"> //綁定事件
            <label class="checkbox" wx:for="{{items}}">//循環(huán)綁定到item
                <checkbox value="{{item.value}}" checked="{{item.checked}}"
                > 
                {{item.value}}
                </checkbox>
            </label>
        </checkbox-group>
    </view>

    <view class="checkfooter">
    <text >{{text}}</text>//顯示選中的數(shù)據(jù)的name
    </view>
</view>

css文件


.bd{
    width: 800rpx;
    height: 500rpx;
    margin-left: 50rpx;
}
.checkbox{
   display: block;//這個(gè)要一定寫(xiě)的 暫時(shí)沒(méi)搞懂意思  應(yīng)該是一種布局方式。
   margin: 20;
}
.checklabel{
    width: 500rpx;
    height: 200rpx;
}
.checkfooter{
    margin-left: 50rpx;
}

效果如下:



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/22907.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢