您现在的位置是:网站首页>>微信>>微信小程序

微信小程序组件——视图容器

发布时间:2019-08-07 15:46:44作者:wangjian浏览量:157点赞量:0

    前面我们已经简单的介绍了微信小程序项目的基本结构,这里我们来了解下微信小程序的一些常用组件

    这里我们先来了解下微信小程序的视图容器组件,这里只展示一些常见的组件,详细了解参考:https://developers.weixin.qq.com/miniprogram/dev/component/

    1:一个视图文件在一个区域实现拖拽滑动(movable-view + movable-area)

    movable-view组件和movable-area组件结合实现拖拽滑动,movable-view组件必须在movable-area组件中,并且必须是直接子节点,否则不能移动

    (1):movable-area组件属性:

    scale-area:当里面的movable-view设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个movable-area,默认为false

    (2):movable-view组件属性:

    direction:movable-view的移动方向,属性值有all、vertical、horizontal、none,默认为none

    inertia:movable-view是否带有惯性,默认为false

    out-of-bounds:超过可移动区域后,movable-view是否还可以移动,默认为false

    x:定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画

    y:定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画

    damping:阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快,默认为20

    friction:摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值,默认为2

    disabled:是否禁用,默认为false

    scale:是否支持双指缩放,默认缩放手势生效区域是在movable-view内,默认为false

    scale-min:定义缩放倍数最小值,默认为0.5

    scale-max:定义缩放倍数最大值 ,默认为10

    scale-value:定义缩放倍数,取值范围为 0.5 - 10,默认为1

    animation:是否使用动画  ,默认为true

    bindchange:拖动过程中触发的事件,event.detail = {x, y, source} 

    bindscale:缩放过程中触发的事件,event.detail = {x, y, scale},x和y字段在2.1.0之后支持

    htouchmove:初次手指触摸后移动为横向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch

    vtouchmove:初次手指触摸后移动为纵向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch

    例:

    <!-- wxml -->
    <view>
    <movable-area
    style="height: 200px; width: 200px; background: red;"
    scale-area  //设置支持双指缩放
    >
       <movable-view
       style="height: 50px; width: 50px; background: blue;"
       direction="all" //设置移动方向
       bindchange="onChange" //拖动过程中触发的事件
       bindscale="onScale" //缩放过程中触发的事件
       scale //设置支持双指缩放
       scale-min="0.5" //定义缩放倍数最小值
       scale-max="4" //定义缩放倍数最大值
       scale-value="2"//定义缩放倍数
       x="{{x}}" //设置x轴方向的偏移
         y="{{y}}"//设置y轴方向的偏移
       >
       </movable-view>
    </movable-area>
    </view>
    <view class="btn-area">
    <button size="mini" bindtap="tap">点击移动 (30px, 30px)</button>
    </view>
    // js
    Page({
      data: {
        x: 0,//设置初始的x轴偏移
        y: 0//设置初始的y轴偏移
      },
      tap: function (e) {
        // 按钮点击事件
        this.setData({
          x: 30,
          y: 30
        });
      },
      onChange: function (e) {
        //拖动过程中触发的事件
        console.log(e.detail)
      },
      onScale: function (e) {
        //缩放过程中触发的事件
        console.log(e.detail)
      },
    })

    2:滑块视图容器(swiper + swiper-item) 轮播图效果

    (1):swiper组件属性:

    indicator-dots:是否显示面板指示点,默认为false

    indicator-color:指示点颜色,默认为rgba(0, 0, 0, .3)

    indicator-active-color:当前选中的指示点颜色,默认为#000000

    autoplay:是否自动切换,默认为false

    current当前所在滑块的index,默认为0

    interval:自动切换时间间隔,默认为5000

    duration:滑动动画时长,默认为500

    circular:是否采用衔接滑动,默认为false

    vertical:滑动方向是否为纵向,默认为false

    previous-margin:前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值,默认为0px

    next-margin:后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值,默认为0px

    display-multiple-items:同时显示的滑块数量,默认为1

    skip-hidden-item-layout:是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息,默认为false

    easing-function:指定 swiper 切换缓动动画类型,默认为default,可选参数:defaul(默认缓动函数),linear(线性动画),easeInCubic(缓入动画),easeOutCubic(缓出动画),easeInOutCubic(缓入缓出动画)

    bindchange:current 改变时会触发 change 事件,event.detail = {current, source}

    bindtransition:swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}

    bindanimationfinish:动画结束时会触发 animationfinish 事件,event.detail 同上 

    (2):swiper-item组件属性:

    item-id:该 swiper-item 的标识符

    例:

    <!--wxml-->
    <swiper 
    indicator-dots="{{indicatorDots}}" //设置是否显示面板指示点
    autoplay="{{autoplay}}" //设置是是否自动切换
    interval="{{interval}}" //设置自动切换时间间隔
    duration="{{duration}}"//设置滑动动画时长
    bindchange="onChange"//设置current 改变时会触发 change 事件
    >
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" width="355" height="150"/>
        </swiper-item>
      </block>
    </swiper>

    // js
    Page({
    data: {
    //设置轮播图的图片信息
    imgUrls: [
    'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
    'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
    'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ],
    indicatorDots: true,//设置是否显示面板指示点
    autoplay: true,//设置是否自动切换 
    interval: 5000,//设置自动切换时间间隔 
    duration: 1000//滑动动画时长  
    },
    onChange: function (e) {
    //切换事件
    console.log(e.detail)
    },
    })

    根据如上可以实现轮播图效果

0 +1