三： 视图容器。

之后按照上一章节的方法一样创建一个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 :  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的实例代码。

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: [        '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----*/

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的顺序来看一些基本的标签。

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/dandingjun/p/6088208.html