微信小程序-UI控件的使用(4)

参考微信官方demo敲的例子：https://mp.weixin.qq.com/debug/wxadoc/dev/component/view.html?t=2017112

1、view的布局方式：

flex-direction:row

<view class="section">      <view class="section__title">flex-direction: row</view>      <view class="flex-wrp" style="flex-direction:row;">        <view class="flex-item bc_green"></view>        <view class="flex-item bc_red"></view>        <view class="flex-item bc_blue"></view>      </view>    </view>

flex-direction: column

 <view class="section">      <view class="section__title">flex-direction: column</view>      <view class="flex-wrp" style="height: 300px;flex-direction:column;">        <view class="flex-item bc_green"></view>        <view class="flex-item bc_red"></view>        <view class="flex-item bc_blue"></view>      </view>    </view>

justify-content: flex-start，justify-content: flex-end;，justify-content: center

<view class="section">      <view class="section__title">justify-content: flex-start</view>      <view class="flex-wrp" style="flex-direction:row;justify-content: flex-start;">        <view class="flex-item bc_green"></view>        <view class="flex-item bc_red"></view>        <view class="flex-item bc_blue"></view>      </view>    </view>    <!--  -- -- -- -- --      section   -- -- -- -- -- -- --   -->    <view class="section">      <view class="section__title">justify-content: flex-end</view>      <view class="flex-wrp" style="flex-direction:row;justify-content: flex-end;">        <view class="flex-item bc_green"></view>        <view class="flex-item bc_red"></view>        <view class="flex-item bc_blue"></view>      </view>    </view>    <!--  -- -- -- -- --      section   -- -- -- -- -- -- --   -->    <view class="section">      <view class="section__title">justify-content: center</view>      <view class="flex-wrp" style="flex-direction:row;justify-content: center;">        <view class="flex-item bc_green"></view>        <view class="flex-item bc_red"></view>        <view class="flex-item bc_blue"></view>      </view>    </view>

justify-content: space-between,justify-content: space-around

<view class="section">      <view class="section__title">justify-content: space-between</view>      <view class="flex-wrp" style="flex-direction:row;justify-content: space-between;">        <view class="flex-item bc_green"></view>        <view class="flex-item bc_red"></view>        <view class="flex-item bc_blue"></view>      </view>    </view>    <!--  -- -- -- -- --      section   -- -- -- -- -- -- --   -->    <view class="section">      <view class="section__title">justify-content: space-around</view>      <view class="flex-wrp" style="flex-direction:row;justify-content: space-around;">        <view class="flex-item bc_green"></view>        <view class="flex-item bc_red"></view>        <view class="flex-item bc_blue"></view>      </view>    </view>

align-items: flex-end , align-items: center

<view class="section">      <view class="section__title">align-items: flex-end</view>      <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: flex-end">        <view class="flex-item bc_green"></view>        <view class="flex-item bc_red"></view>        <view class="flex-item bc_blue"></view>      </view>    </view>    <!--  -- -- -- -- --      section   -- -- -- -- -- -- --   -->    <view class="section">      <view class="section__title">align-items: center</view>      <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: center">        <view class="flex-item bc_green"></view>        <view class="flex-item bc_red"></view>        <view class="flex-item bc_blue"></view>      </view>    </view>

---

2、scroll-view(水平／垂直方向)

水平方向

<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">        <view id="green" class="scroll-view-item bc_green"></view>        <view id="red" class="scroll-view-item bc_red"></view>        <view id="yellow" class="scroll-view-item bc_yellow"></view>        <view id="blue" class="scroll-view-item bc_blue"></view>      </scroll-view>

垂直方向

<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">        <view id="green" class="scroll-view-item_H bc_green"></view>        <view id="red" class="scroll-view-item_H bc_red"></view>        <view id="yellow" class="scroll-view-item_H bc_yellow"></view>        <view id="blue" class="scroll-view-item_H bc_blue"></view>      </scroll-view>

bindscrolltoupper：滚动到顶部所触发的事件
bindscrolltolower：滚动到底部所触发的事件
bindscroll：滚动时所触发的事件
scroll-into-view：滚动到哪个视图 scroll-top：滚动到顶部

3、swiper
swiper.wxml

<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"                    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">                <block wx:for-items="{{imgUrls}}">                    <swiper-item>                        <image src="{{item}}"></image>                        <!--<view class="swiper-item bc_{{item}}"></view>-->                    </swiper-item>                </block>            </swiper>

swiper.js

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'      ],        indicatorDots: true,        vertical: false,        autoplay: false,        interval: 3000,        duration: 1000    }})

indicator-dots:是否显示面板指示点
vertical:是否为垂直方向
autoplay：是否自动播放
interval：自动切换时间间隔
duration：动画时长