之后按照上一章节的方法一样创建一个test页面。（以下都把这个文件当成一个页面说。如index文件就是index页面）
然后按照上一章节修改 app.json 。
之后修改 index.wxml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/* ---page/index/index.wxml----*/<!--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 ， 没学过的同学可以把他看作一个盒子，这个盒子包装所有的货物。
|
1
2
3
4
5
6
7
|
/* ---page/test/test.wxml----*/<view class="box"> <text>我是盒子中的货物</text></view>/* ---page/test/test.wxml----*/ |
|
1
2
3
4
5
6
7
8
9
10
11
|
/* ---page/test/test.wxss----*/.box { background: #000; margin-top: 100rpx; padding: 10rpx; color: #FFF; font-size: 42rpx;}/* ---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的实例代码。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
/* ---page/test/test.js----*/Page({ data: { imgUrls: [ ], 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----*/ |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/* ---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="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} |
注意：其中只可放置swiper-item组件，其他节点会被自动删除
之后 按照 w3c的顺序来看一些基本的标签。