微信小程序开发（五）

#flex布局
##wxml页面代码：
```html
<view class="flex-wrap">
    <view class="a">a</view>
    <view class="b">b</view>
    <view class="c">c</view>
</view>
```
##wxss页面代码：
```css
.flex-wrap{
    /*父级设置为弹性盒模型，使得该容器内的view为横排显示*/
    display: -webkit-flex;
    
    /*下面的代码使得下面的view为纵向排列*/
    /*横排显示值为row*/
    /*flex-direction: column;*/
    /*取消上面的注释后，下面的子级view会撑满1000rpx*/
    /*height: 1000rpx;*/
}
.flex-wrap view{
    /*height: 200rpx;  */
    line-height: 200rpx;
    text-align: center;
    /*width: 200rpx;*/
}
/*下面abc中的flex相加为将屏幕横向分为四份
*后面的数值是所占的四分之几的比例*/
.a{
    background: red;
    /*横向占1/4*/
    flex: 1
}
.b{
    background: yellow;
    /*横向占1/4*/
    flex: 1
}
.c{
    background: green;
    /*横向占2/4*/
    flex: 2
}
```
##效果如下
<p><img src="https://cos.cc430.cn/2016/12/21/aa.png" alt="" width="346" height="592"/></p>

#scroll-view标签的用法

##wxml页面：
```html

<scroll-view class="scoll-wrap" scroll-y="true" upper-threshold="50"  bindscrolltoupper="toupper" bindscrolltolower="tolower">
    <view class="d"></view>
    <view class="e"></view>
    <view class="f"></view>
</scroll-view>
```

##wxss页面代码：
```css
.scoll-wrap{
    height: 400rpx;
    width: 400rpx;
    border: 1px solid red;
}
.scoll-wrap view{
    height: 300rpx;
    width: 500rpx;
}
/*下面abc中的flex相加为将屏幕横向分为四份
*后面的数值是所占的四分之几的比例*/
.d{
    background: red;
}
.e{
    background: yellow;
}
.f{
    background: green;

}
```
##效果如下
<img src="https://cos.cc430.cn/2016/12/21/asd.png" alt="" width="378" height="624"/>

#swiper轮播图组件
##wxml页面代码：
```html


<swiper indicator-dots="true"
  autoplay="true" interval="5000" duration="1000"
  bindchange="swiperchange">
    <block wx:for="{{imgUrls}}">
       <swiper-item>
         <image src="{{item}}" class="slide-image" width="355" height="150"/>
       </swiper-item>
     </block>
</swiper>
```

##js页面代码：
```javascript
Page({
    data: {
    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'
    ]},
    tolower:function(){
        console.log("到底端了！");
    },
    toupper:function(){
        console.log("到顶端了！");
    },
    swiperchange:function(e){
       console.log(e);
    }
  })
```

##效果如下：
<img src="https://cos.cc430.cn/2016/12/21/12.png" alt="" width="371" height="605"/>

#图标组件
##wxml页面代码：
```html



<view>第一组组件，以大小排序</view> 
<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>
<view>第二组组件，以图标类型排序</view> 
<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="45"/>
  </block>
</view>
<view>第三组组件，以图标颜色排序</view> 
<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="45" color="{{item}}"/>
  </block>
</view>
```
##js页面代码：
```javascript
Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
      'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
      'info_circle', 'cancel', 'search', 'clear'
    ]
  }
})
```
##预览效果：
<img src="https://cos.cc430.cn/2016/12/21/13.png" alt="" width="351" height="604"/>

#进度条
##wxml页面代码：
```html


<progress percent="{{progress}}" show-info="true" stroke-width="20" color="red" active="true"
/>
```
##js页面代码：
```javascript
   //进度条加载显示
    /**有一个bugbug
     * 只有当progressprogressNum的值接近92的时候才会执行
     * 加载，当没有超过的时候会不停的来回0、1切换*/
//初始化进度条进度
var progressNum=0;
Page({
    data: {
    /*进度条变量*/
    progress:0
    }, 
    onLoad:function(){
      var that=this;
      //添加定时器，每30毫秒progressNum变量自增1
      var timer=setInterval(
        function(){
           progressNum++;
          /*因为在内部取不到this的值，所以应用外部的that指向this*/
          console.log("progressNum");
            that.setData({
           /*每次都将progress的值重新赋值一次*/
            progress:progressNum
            })
           //当变量值大于100时，定时器清理
           if(progressNum>=100){
           clearInterval(timer);
           }      
        },30);
    }
  }
```

微信小程序开发（五）

添加新评论

最新文章

最新回复

标签

归档

友情链接