本帖最后由 程序猿大侠 于 2017-2-21 20:46 编辑

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

首先看一下这个示例程序的运行效果。
微信小程序--三个视图控件Demo.gif
大家可以看到,有三个视图,分别用不同的配置和使用方式。
接下来我们具体展开来介绍。

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

QQ截图20170221193458.jpg
index页面的WXML代码如下:
[XML] 纯文本查看 复制代码
<!--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代码如下:
[JavaScript] 纯文本查看 复制代码
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样式代码如下:
[CSS] 纯文本查看 复制代码
/**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中。
[CSS] 纯文本查看 复制代码
/**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组件页面,页面截图如下:
QQ截图20170221193537.jpg
View页面的WXML代码如下:
[XML] 纯文本查看 复制代码
<!--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代码如下:
[JavaScript] 纯文本查看 复制代码
/**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代码。效果,可以查看最顶部的动画效果图。

第二、滑动视图组件页面的截图如下:
QQ截图20170221193551.jpg
ScrollView页面的WXML代码如下:
[XML] 纯文本查看 复制代码
<!--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代码如下:
[JavaScript] 纯文本查看 复制代码
//ScrollView.js
var order = ['green', 'red', 'yellow', 'blue', 'green']
Page({
})


ScrollView页面的WXSS代码如下:
[CSS] 纯文本查看 复制代码
/**ScrollView.wxss**/
/**更多源码请于51小程序源码版块下载:[url]http://bbs.html51.com/f-36-1/[/url]**/
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 200px;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
}
.flex-wrp{
    height: 200px;
    display: flex;
    background-color: #ffffff;
}


此页面的效果,可以查看最顶部的动画效果图。

第三、Swiper视图组件页面的截图如下:
QQ截图20170221193603.jpg

这样页面相对比较复杂,可以看到一个滑块视图,3个按钮控制不同的显示状态,另外2个滑动条,控制滑块视图切换时的快慢。
具体如下代码和解读:

Swiper页面的WXML代码如下:
[XML] 纯文本查看 复制代码
<!--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代码如下:
[JavaScript] 纯文本查看 复制代码
//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
    })
  }
})


Swiper页面的WXSS代码如下:
[CSS] 纯文本查看 复制代码
/**Swiper.wxss**/
.swiper-item{
  display: block;
  height: 150px;
}


基本整个项目代码都在这里了。大家可以看一下。当然如果希望下载源码运行后看效果的话。
下面可以下载源码:
游客,如果您要查看本帖隐藏内容请回复

具体运行方法大家应该都清楚吧。如果不知道,可以点击查看这片文章。
如何使用下载的微信小程序源码,来运行Demo程序
分享到 :
0 人收藏

30 个回复

倒序浏览
cjwddyrhhh  小程序菜鸟 | 2017-3-27 09:19:09
不错  可以的  很有帮助
411126903  小程序菜鸟 | 2017-3-27 14:28:02

初学者,看看能否学会
xiuxiu  小程序菜鸟 | 2017-4-9 12:31:49
新手,自己写的有问题。下载来看看
wgc379003923  小程序菜鸟 | 2017-6-18 14:43:16
很好的教程
chengZQ  小程序菜鸟 | 2017-6-26 15:06:45
新手,要借鉴一下,如何用组件
chengZQ  小程序菜鸟 | 2017-6-26 15:08:15
很好的demo,对于我这个菜鸟来说够用了
chengZQ  小程序菜鸟 | 2017-6-26 15:10:42
很好的demo,对于我这个菜鸟来说够用了
gravvi  小程序菜鸟 | 2017-7-26 17:32:10
回复一个下载看看
gravvi  小程序菜鸟 | 2017-7-26 17:32:48
回复一个下载看看
您需要登录后才可以回帖 登录 | 朕要注册

本版积分规则

QQ|手机版|51小程序,合作QQ: 2826431922 ( 苏ICP备15027371号 )

Powered by Discuz! X3.2

返回顶部