微信小程序三个视图控件View、ScrollView、Swiper的解读及示例

工具库

关于微信小程序的视图控件，今天带给大家系统的解读和示范，相信看完后都可以轻松用好了。

首先看一下这个示例程序的运行效果。

index页面的WXML代码如下：

{{motto}} View组件示范Scroll-View组件示范Swiper组件示范

index页面的JS代码如下：

var app = getApp()Page({data: {motto: '基础视图View，滑动视图ScrollView，滑块Swiper',userInfo: {}}, onLoad: function () {console.log('onLoad')var that = this//调用应用实例的方法获取全局数据app.getUserInfo(function(userInfo){//更新数据that.setData({userInfo:userInfo})})}})

index页面的WXSS样式代码如下：

/**index.wxss**/.usermotto {margin-top: 30px;font-size: 20px;} .viewName{margin-top: 30px;margin-left: 40px;margin-right: 40px;height: 50px;font-size: 25px;background-color: #AED2EE;/**下面是设置三个view视图的文本内容上下左右居中**/justify-content: center;display: flex;align-items: center;}

另外我们要提醒一下，因为每个页面都会用到一些相同的样式，这样的情况下，可以把这些样式提取出来放在app.wxss文件中，作为公共样式。
本示例Demo中的公共样式如下，写在app.wxss中。

/**app.wxss**/page {background-color: #fbf9fe;height: 100%;}/**在这里可以把整个小程序所有页面用到的公共样式放在这里，便于每个页面直接调用**/.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;}

第一、基础视图View组件页面，页面截图如下：

View页面的WXML代码如下：

			
							
							 
				
                
                    上一篇：最简单的微信小程序Demo
                    下一篇：微信小程序常用控件text、icon、progress、button、navigator