三：视图容器。-优快云博客

之后按照上一章节的方法一样创建一个test页面。（以下都把这个文件当成一个页面说。如index文件就是index页面）

然后按照上一章节修改 app.json 。

之后修改 index.wxml

/* ---page/index/index.wxml----*/

<view class= "container" >

<view bindtap= "bindViewTap" class= "userinfo" >

<image class= "userinfo-avatar" src= "{{userInfo.avatarUrl}}" background-size= "cover" ></image>

<text class= "userinfo-nickname" >{{userInfo.nickName}}</text>

</view>

<view bindtap= "onTopics" class= "usermotto" >

<text class= "user-motto" >{{motto}}</text>

</view>

<navigator url= "../test/test" >跳转到新页面</navigator>

<navigator url= "../test/test" redirect >在当前页打开</navigator>

</view>

/* ---page/index/index.wxml----*/

这次我们直接用了一个navigator的标签。他其实也是跳转。

也代替了上一章节的toTopics方法如果加上了 redirect这个属性那么会在当前页面打开。（这里只是为了熟悉下redirect的属性可以删掉两个中的其中一个。）

之后我们来修改 test.wxml的页面来讲解他的视图各种容器。

一、view

他是一个视图容器。学过前端的同学可以把他看做一个div ，没学过的同学可以把他看作一个盒子，这个盒子包装所有的货物。

/* ---page/test/test.wxml----*/

<view class= "box" >

<text>我是盒子中的货物</text>

</view>

/* ---page/test/test.wxml----*/

/* ---page/test/test.wxss----*/

.box {

background : #000 ;

margin-top : 100 rpx;

padding : 10 rpx;

color : #FFF ;

font-size : 42 rpx;

}

/* ---page/test/test.wxss----*/

二、scroll-view

怎么说呢他相当于 css 中 overflow：scroll 的这个属性。当内容溢出的时候。有滚动条。。这里就不贴代码了发个图片。

当然他还有很多的属性。

scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部
bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
bindscroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

三、swiper

学过前端的童鞋可以把他看作为一个轮播容器。来看W3C的实例代码。

/* ---page/test/test.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 ,

autoplay: false ,

interval: 2000,

duration: 1000,

current:1,

},

changeIndicatorDots: function (e) {

this .setData({

indicatorDots: ! this .data.indicatorDots

})

},

changeAutoplay: function (e) {

this .setData({

autoplay: ! this .data.autoplay

})

},

intervalChange: function (e) {

this .setData({

interval: e.detail.value

})

},

durationChange: function (e) {

this .setData({

duration: e.detail.value

})

},

moveLB: function (e){

console.log( "当前第" +e.detail.current+ "页" )

}

})

/* ---page/test/test.js----*/

/* ---page/test/test.wxml----*/

<view>

<swiper class= "swiper_box" current= "{{current}}" indicator-dots= "{{indicatorDots}}" vertical= "{{vertical}}"

autoplay= "{{autoplay}}" interval= "{{interval}}" duration= "{{duration}}" bindchange= "moveLB" >

<swiper-item wx: for = "{{imgUrls}}" >

<image src= "{{item}}" style= "width:100%;" />

</swiper-item>

</swiper>

</view>

<button bindtap= "changeIndicatorDots" > indicator-dots </button>

<button bindtap= "changeAutoplay" > autoplay </button>

<slider bindchange= "intervalChange" show-value min= "2000" max= "5000" /> interval

<slider bindchange= "durationChange" show-value min= "0" max= "1000" /> duration

/* ---page/test/test.wxml----*/

首先这里我把源码改了加了一个moveLB的方法同时在wxml里也加了一个bindchange="moveLB"属性

这个时候每当我滑动一下轮播。控制台会提示我当前是第几张轮播。。当然 callback的这个 e属性还有更多的操作。这代表能做的事情也很多。每滑动一次就调用一次方法。

试想一下。当我轮播的东西不是图片而是一段wxml代码。而这wxml代码又是ajax取值那这个时候是不是就可以做到用滑动取值之后渲染有新数据的页面。。因为以前用过ionic做过这种操作。

但是需要知道的是这样写代码的话。并不是很友好。慎用。如果真的需要用到的话。最好用缓存来完成。之后得知了两个重点。

1：binchange 是可以用在轮播swiper标签上的

2：binchange 也可以用在 slider 标签上的，学过html5的童鞋可以把他当作一行代码<input type="range">

当然应该还有很多用途，但是在这里只在这里列举两点。最后列出swiper的所有属性。

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在页面的index
interval	Number	5000	自动切换时间间隔
duration	Number	1000	滑动动画时长
bindchange	EventHandle		current改变时会触发change事件，event.detail={current:current}