三： 视图容器。

之后按照上一章节的方法一样创建一个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="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}

注意：其中只可放置swiper-item组件，其他节点会被自动删除

之后 按照 w3c的顺序来看一些基本的标签。

 

 
 
 
 
 
 
 
 
 
 
 
posted @ 2016-11-22 10:32  淡定君  阅读(582)  评论(0)  编辑  收藏  举报