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

作者：匿名字体：[增加减小] 来源：互联网时间：2018-11-30

匿名通过本文主要向大家介绍了微信小程序等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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

大家可以看到，有三个视图，分别用不同的配置和使用方式。
接下来我们具体展开来介绍。

我们先新建一个项目，在首页添加三个navigator导航按钮，分别跳转到对应的组件示范页面。

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

index页面的WXML代码如下：

<!--index.wxml-->
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</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>

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、ScrollView、Swiper的解读及示例

View页面的WXML代码如下：

<!--View.wxml-->
<!--更多源码请于51小程序源码版块下载：[url]http://bbs.html51.com/f-36-1/-->[/url]
<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>
<!--样式二，竖向排列。下面的style="height:300px"样式，也可以在 .wxml的文件中进行样式设计-->
<view class="section">
    <view class="section__title">样式二，竖向排列</view>
    <view class="flex-wrp" style="height:300px">
<!--下面的view有2个class 一个是来之View.wxss文件定义的样式，一个是总的样式文件app.wxss定义的样式-->
        <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代码如下：

/**View.wxss**/
.flex-wrp{
    height: 100px;
    display: flex;
    background-color: #ffffff;
}
/**
这里定义了一个样式，另外在总的小程序app.wxss中也可以定义通用的样式，可以应用到每个页面中。
**/
.flex-item{
    width: 100px;
    height: 100px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

因为这里是演示View组件，所有没有JS代码。效果，可以查看最顶部的动画效果图。

第二、滑动视图组件页面的截图如下：

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

ScrollView页面的WXML代码如下：

<!--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>

ScrollView页面的JS代码如下：

//ScrollView.js
var order = ['green', 'red', '

分享到：QQ空间新浪微博腾讯微博微信百度贴吧 QQ好友复制网址打印

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

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容