微信小程序基础之试图控件View、ScrollView、Swiper

今天写一篇关于微信小程序视图控件的文章，主要是介绍界面的搭建和部分操作js交互功能的介绍，转载请注明出处，谢谢~

首先显示首页结构。创建三个navigator，用来跳转页面：

<!--index.wxml-->
<!--创建一个标签介绍-->
<view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
<!--创建三个navigator,一定要记住为了便捷，可以把新创建的文件放
在index文件下，然后对应写文件跳转路径，如：Component/View/View，
在软件的最下面有对应编辑文件的路径地址-->
<view class="viewName">
  <navigator url="Component/View/View">
    <text class="view-Name">View展示</text>
  </navigator>
</view>
<view class="viewName">
  <navigator url="Component/ScrollView/ScrollView">
    <text class="view-Name">Scroll-View展示</text>
  </navigator>
</view>
<view class="viewName">
  <navigator url="Component/Swiper/Swiper">
    <text class="view-Name">Swiper展示</text>
  </navigator>
</view>

然后分开创建三个样式界面：

1.<!--View.wxml-->
<view class="viewTitle">
    <text>View展示</text>
</view>
<!--样式一，横向排列-->
<view class="section">
    <view class="section__title">样式一，横向排列</view>
    <view class="flex-wrp">
        <view class="flex-item bc_green">111</view>
        <view class="flex-item bc_red">222</view>
        <view class="flex-item bc_blue">333</view>
    </view>
</view>
<!--样式二，竖向排列,注意在 .wxml的文件中也可以通过style参数进行样式设计-->
<view class="section">
    <view class="section__title">样式二，竖向排列</view>
    <view class="flex-wrp" style="height:300px">
        <view class="flex-item bc_green" style="margin-top: 0px">111</view>
        <view class="flex-item bc_red" style="margin-top: 100px">222</view>
        <view class="flex-item bc_blue" style="margin-top: 200px">333</view>
    </view>
</view>

其中样式展示中可以相互结合，减少代码量：

/**View.wxss**/
.flex-wrp{
    height: 100px;
    display: flex;
    background-color: #ffffff;
}
/**记住，样式类名之间可以相互搭配使用，这样样式设计时可以减少代码量，
不过这需要好的逻辑设计，如：View.wxml文件中
<view class="flex-item bc_green">111</view>的语句，
就是flex-item与app.wxss中bc_green的结合**/
.flex-item{
    width: 100px;
    height: 100px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}
2.<!--ScrollView.wxml-->
<view class="viewTitle">
    <text class="titleName">ScrollView视图展示</text>
  </view>
  <!--样式一，竖向滑动-->
<view class="section">
    <view class="section__title">样式一，竖向滑动Vertical</view>
    <view class="flex-wrp">
    <!--bindscrolltoupper后面的参数可以不写，在.js文件中
    有对应的交互方法-->
      <scroll-view scroll-y="true" style="height: 200px;"
      bindscrolltoupper="upper" bindscrolltolower="lower"
      bindscroll="scroll" scroll-into-view="{{toView}}"
      scroll-top="{{scrollTop}}">
      <!--这里的id用来js中找到对应的显示视图，如果不进行js中data的{{toView}}
      的数据交互，显示的是蓝黄红绿，如果进行js数据交互，那么初始化时显示的是
      最下面的绿-->
        <view id="blue" class="scroll-view-item bc_blue"></view>
        <view id="yellow"  class="scroll-view-item bc_yellow"></view>
        <view id="red" class="scroll-view-item bc_red"></view>
        <view id="green" class="scroll-view-item bc_green"></view>
      </scroll-view>
    </view>
</view>
<!--样式二，横向滑动-->
<view class="section">
    <view class="section__title">样式二，横向滑动Horizontal</view>
    <view class="flex-wrp">
    <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
        <view id="green" class="scroll-view-item_H bc_green"></view>
        <view id="red"  class="scroll-view-item_H bc_red"></view>
        <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
        <view id="blue" class="scroll-view-item_H bc_blue"></view>
      </scroll-view>
    </view>
</view>

3.<!--Swiper.wxml-->
  <view class="viewTitle">
    <text class="titleName">Swiper视图展示</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap swiper">
      <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
        autoplay="{{autoplay}}" interval="{{interval}}"
        duration="{{duration}}">
        <block wx:for="{{background}}">
          <swiper-item>
            <view class="swiper-item bc_{{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="btn-area">
      <button type="default" bindtap="changeIndicatorDots">
      显示/取消指示点</button>
      <button type="default" bindtap="changeVertical">
      {{vertical?'横显示':'竖显示'}}</button>
      <button type="default" bindtap="changeAutoplay">
      开始/停止轮播</button>
    </view>
    <slider bindchange="durationChange" value="{{duration}}"
    show-value min="200" max="2000"/>
    <view class="section__title">轮播一次的时间duration</view>
    <slider bindchange="intervalChange" value="{{interval}}"
    show-value min="1000" max="10000"/>
    <view class="section__title">间隔多长时间显示下一个图interval</view>
  </view>

第三个视图展示的交互操作，包含文字显示，点击按钮，滑块操作变化等等：

//Swiper.js
Page({
  data: {
    background: ['green', 'red', 'yellow'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 3000,
    duration: 1200
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeVertical: function (e) {
    this.setData({
      vertical: !this.data.vertical
    })
  },
  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
    })
  }
})

然后设计过程中，有些样式重复可以在app.wxss中进行样式确定，方便重复调用：

/**这里可以设计所有界面中都包含的控件的公共样式，但是要记住类名要写一致，
否则无法调用，比如下面的类名就是每个页面的标题样式**/
.viewTitle{
    margin-top: 20px;
    height: 40px;
    text-align: center;
}
.bc_green{
    background-color: #09BB07;
}
.bc_red{
    background-color: #F76260;
}
.bc_blue{
    background-color: #10AEFF;
}
.bc_yellow{
    background-color: #FFBE00;
}
.bc_gray{
    background-color: #C9C9C9;
}

还要记住，需要在app.json中添加界面地址，否则会出现跳转失败的问题，而且文件的添加位置，不要写错:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",

    "pages/index/Component/View/View",
    "pages/index/Component/ScrollView/ScrollView",
    "pages/index/Component/Swiper/Swiper"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#FFF0F5",
    "navigationBarTitleText": "组件一介绍：视图控件",
    "navigationBarTextStyle":"black",
    "backgroundColor": "#fbf9fe"
  }
}

效果图展示：

     

        

源码下载，如果源码不能使用的请留言，谢谢~，转载请注明出处，谢谢~：https://github.com/hbblzjy/WXViewScrollSwiperDemo