简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > 微信小程式 > 小程式開發 > 主體

微信小程式三個視圖控制項View、ScrollView、Swiper的解讀及範例

高洛峰
發布： 2017-02-24 14:36:42
原創
3061 人瀏覽過

關於微信小程式的視圖控件，今天帶給大家系統的解讀與示範，相信看完後都可以輕鬆用好了。

先來看看這個範例程式的運作效果。

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

大家可以看到，有三個視圖，分別用不同的配置和使用方式。
接下來我們具體展開來介紹。

我們先新建一個項目，在首頁增加三個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: &#39;基础视图View，滑动视图ScrollView，滑块Swiper&#39;,
userInfo: {}
},
 
onLoad: function () {
console.log(&#39;onLoad&#39;)
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 = [&#39;green&#39;, &#39;red&#39;, &#39;yellow&#39;, &#39;blue&#39;, &#39;green&#39;]
Page({
})
登入後複製

ScrollView頁面的WXSS程式碼如下：

/**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視圖元件頁面的截圖如下：

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

#這樣頁面相對比較複雜，可以看到一個滑桿視圖，3個按鈕控制不同的顯示狀態，另外2個滑動條，控制滑桿視圖切換時的快慢。
具體如下程式碼和解讀：

Swiper頁面的WXML程式碼如下：

<!--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?&#39;横显示&#39;:&#39;竖显示&#39;}}</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程式碼如下：

//Swiper.js
Page({
  data: {
    background: [&#39;green&#39;, &#39;red&#39;, &#39;yellow&#39;],
    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程式碼如下： 

/**Swiper.wxss**/
.swiper-item{
  display: block;
  height: 150px;
}
登入後複製

更多 微信小程式三個視圖控制項View、ScrollView、Swiper的解讀及範例相關文章請關注PHP中文網！

相關標籤：
微信小程序
來源：php.cn
上一篇：最簡單的微信小程式Demo 下一篇：微信小程式常用控制項text、icon、progress、button、navigator
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何解決問題：'無法載入資源：net::ERR_CONNECTION_REFUSED http://localhost:8989/route?.....” 我的程式有問題。這是一個關於地理資訊系統的程序，使用了LeatlefJs函式庫，我還使用了letlef路由機功能。問題是系統無法顯示它應該能夠顯示的路線，我不太明白。這是腳本。 f...
來自於 2023-11-12 19:34:27
0
1
244
在 PHP 中利用 VueJS 元件 我想混合由Php和VueJS元件產生的基本HTML，而不必一直使用VueJS到最低的dom葉子。父佈局應用了Vue應用程序，所有標頭、導航、旁注等都是Vue元件，大多數頁面上的主要...
來自於 2023-11-11 00:01:44
0
2
288
Nuxt.js：視窗未定義 apexcharts/vue-apexcharts 我從apexcharts.com添加了這個簡單的範例。很確定導入是正確的。我沒有在任何地方引用視窗。添加此文件時，我的整個應用程式就停止了。我相信這與SSR或Nuxt配置有關。 &...
來自於 2023-11-09 22:07:08
0
2
217
Vue 開發工具中元件旁邊的效能數字是多少？ 有人對Vue開發工具中的某個功能有見解或資源嗎？在元件窗格上，它顯示了我的元件，然後是這些紅色和黃 色的小方塊，以及我假設的元件的效能。當我第一次載入應用程式時，它們不會出現，但例...
來自於 2023-11-09 14:46:48
0
1
305
嘗試安裝 Laravel Breeze 時遇到 Laravel Mix 錯誤 我正在嘗試在我的新Laravel應用程式中安裝LaravelBreeze。一切都工作正常，但是當在控制台中輸入npmrundev時，我不斷收到此錯誤：子編譯中存在3個警告（分別使用...
來自於 2023-11-07 23:05:02
0
1
299
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！