今天写一篇关于微信小程序视图控件的文章，主要是介绍界面的搭建和部分操作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