「小程序JAVA实战」小程序的组件（23）

男娘i 2022-01-12 07:13 214阅读 0赞

转自：https://idig8.com/2018/08/11/xiaochengxu-chuji-23/

> 开始了解下小程序的组件。源码：https://github.com/limingios/wxProgram.git 中的No.10

### 组件 ###

*  多个组件构成一张视图页面  
    >经过样式和布局，页面其实理解成html

*  组件包含<开始标签></结束标签>
    
     
 *  每个组件都包含一些公用属性
 *  官方的阐述
    
    > https://developers.weixin.qq.com/miniprogram/dev/component/

![1240][]

#### view视图组件 ####

*  view 组件  
    >用的最多的，也是之前的样例也讲过。https://developers.weixin.qq.com/miniprogram/dev/component/view.html

![1240 1][]

*  演示用例

<view class="container" hover-class='hover-class' hover-start-time="10000" hover-stay-time="2000">
    </view>

.container{
      background-color: red;
    }
    
    .hover-class{
      background-color: gray;
    }

![1240 2][]

#### scroll-view 视图组件 ####

*  官网的介绍  
    >https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

![1240 3][]

![1240 4][]

*  演示

<scroll-view class="container-wrapp" style='height:300rpx' scroll-y='true'
    bindscrolltoupper="scrolltoupper"
    bindscrolltolower="scrolltolower"
    upper-threshold="0"
    lower-threshold="0"
    scroll-top="100"
    enable-back-to-top="true"
    scroll-with-animation="true"
    bindscroll="scroll"
    scroll-into-view="b"
    >
      <view id="a" class='sizeY a'>a</view>
      <view id="b" class='sizeY b'>b</view>
      <view id="c" class='sizeY c'>c</view>
      <view id="d" class='sizeY d'>d</view>
      <view id="e" class='sizeY e'>e</view>
    </scroll-view>
    
    
    <scroll-view class="container-nowrap" style='margin-top:250rpx' scroll-x='true' scroll-left="200">
      <view id="a" class='sizeX a'>a</view>
      <view id="b" class='sizeX b'>b</view>
      <view id="c" class='sizeX c'>c</view>
      <view id="d" class='sizeX d'>d</view>
      <view id="e" class='sizeX e'>e</view>
    </scroll-view>

//scroll-view.js
    //获取应用实例
    
    Page({
      scrolltoupper:function(){
          console.log("滚动到顶部");
      },
      scrolltolower:function(){
          console.log("滚动到底部");
      },
      scroll:function(){
        console.log("滚动中。。。");
      }
    
    })

.container-wrap{
      display: flex;
      flex-wrap:wrap;
    }
    
    .container-nowrap{
      display:flex;
      white-space: nowrap;
    }
    
    .sizeY{
      width: 100%;
      height: 150rpx;
    }
    
    .sizeX{
      width: 250rpx;
      height: 150px;
      display: inline-block;
    }
    .a {
      background: red;
    }
    .b {
      background: yellow;
    }
    
    .c {
      background: blue;
    }
    
    .d {
      background: green;
    }
    
    .e {
      background: gold;
    }

![1240 5][]

> 注意：enable-back-to-top=”true” 在开发工具没办法演示只能在手机上才能演示出来点击直接到达顶部的效果。关于scrollview 只有横向和纵向，其实这块还是比较重要的多加练习吧。

#### swiper组件 ####

*  俗称 轮播图
 *  官方介绍  
    >https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

![1240 6][]

![1240 7][]

![1240 8][]

*  演示

<swiper indicator-dots="{
        {indicatorDots}}"
      autoplay="{
        {autoplay}}" interval="{
        {interval}}" duration="{
        {duration}}">
      <block wx:for="{
        {imgUrls}}">
        <swiper-item>
          <image src="{
        {item}}" class="slide-image" width="355" height="150"/>
        </swiper-item>
      </block>
    </swiper>
    <button bindtap="changeIndicatorDots"> indicator-dots </button>
    <button bindtap="changeAutoplay"> autoplay </button>
    <slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
    <slider bindchange="durationChange" show-value min="1000" max="10000"/> duration

//swiper.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: false,
        autoplay: false,
        interval: 5000,
        duration: 1000
      },
      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
        })
      }
    })

![1240 9][]

![image.png][]

*  演示

<movable-area class="container">
      <movable-view class='size' direction='all' inertia='true' out-of-bounds='true' x='50' y='50'
      damping='100' friction='100' bindchange='onchange' bindscale='onscale' scale="true">
      </movable-view>
    </movable-area>

.container{
      background-color: red;
      width: 100%;
      height: 650rpx;
    }
    
    .size{
      background-color: yellow;
      width: 300rpx;
      height: 250rpx;
    }

//movable.js
    //获取应用实例
    
    Page({
      onchange:function(){
        console.log("在移动。。");
      },
      onscale:function(){
        console.log("在缩放")
      }
    })

![1240 10][]

PS：跟老铁一起过了一遍wx小程序关于视图的api，感觉还是组件很丰富，很好用！

转载于:https://www.cnblogs.com/sharpest/p/10285513.html

[1240]: /images/20220109/1f6e943a0e3d4c8a821fc87e85f07e99.png
[1240 1]: /images/20220109/412fe62299c5431fa734e4b1afd60930.png
[1240 2]: /images/20220109/1eb54b6bada24ca79640a673220bbe7c.png
[1240 3]: /images/20220109/bad087900e254cce94f0c2d62f51e148.png
[1240 4]: /images/20220109/ec5bf272f857483fa098633de024fbca.png
[1240 5]: /images/20220109/b3197a9007fe45559aae260f9430071a.png
[1240 6]: /images/20220109/78c7f9260ecd46cba9463a14316eae06.png
[1240 7]: /images/20220109/0cba8210a2b4404e928fb8901c429a28.png
[1240 8]: /images/20220109/0d06a78b40a04d5e8e9bd60667248660.png
[1240 9]: /images/20220109/39a6a9319d7d414ca275e979d656a738.png
[image.png]: /images/20220109/6d30415007ec447f97521852f51d9304.png
[1240 10]: /images/20220109/60793afedfed4bf98cb99b1a72a68d43.png