這篇文章主要為大家展示了“微信小程序之UI與容器組件的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“微信小程序之UI與容器組件的示例分析”這篇文章吧。

公司主營業(yè)務(wù)：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出磁縣免費(fèi)做網(wǎng)站回饋大家。

微信小程序 UI與容器組件總結(jié)

1.總結(jié)與概述

2.容器組件

2.1 組件容器（view）

2.2 可滾動(dòng)視圖容器(scroll-view)

2.3 滑塊視圖容器（swiper）

1.總結(jié)與概述

1.1 UI組件總結(jié)圖

1.2 概述

小程序的UI組件也就是定義用戶界面的一系列標(biāo)簽，類似于html標(biāo)簽。一個(gè)完整用戶響應(yīng)過程：事件觸發(fā)——>UI組件接收到事件——>觸發(fā)js函數(shù)響應(yīng)事件——>更新UI

2.容器組件

2.1 容器組件(view)

(1)總結(jié)

(2)例子

效果圖

page.wxml

<view>
 <text class="row-view-title">水平布局：</text>
 <view class="flex-wrp-row">
  <view class="flex-item-red" hover="true" hover-class="hover-style"><text class="color-text">red</text></view>
  <view class="flex-item-green" hover="true" hover-class="hover-style"><text class="color-text">green</text></view>
  <view class="flex-item-blue" hover="true" hover-class="hover-style"><text class="color-text">blue</text></view>
 </view>
</view>
<view>
 <text class="column-view-title">垂直布局：</text>
 <view class="flex-wrp-column" >
  <view class="flex-item-red" hover="true" hover-class="hover-style"><text class="color-text" >red</text></view>
  <view class="flex-item-green" hover="true" hover-class="hover-style"><text class="color-text">green</text></view>
  <view class="flex-item-blue" hover="true" hover-class="hover-style"><text class="color-text">blue</text></view>
 </view>
</view>

page.wxss

.flex-item-red{
 background-color: red;
 height: 200rpx;
 width: 200rpx;
 text-align: center;
 line-height: 200rpx;
}
.flex-item-green{
 background-color: green;
 height: 200rpx;
 width: 200rpx;
 text-align: center;
 line-height: 200rpx
}
.flex-item-blue{
 background-color: blue;
 height: 200rpx;
 width: 200rpx;
 text-align: center; 
 line-height: 200rpx 
}
.flex-wrp-row{
 flex-direction: row;
 display: flex;
 margin-left: 10rpx;
 margin-top: 20rpx;
}
.flex-wrp-column{
 flex-direction: column;
 display: flex;
 margin-left: 10rpx;
  margin-top: 20rpx;
}
.color-text{
 color: snow;
 font-family: 'Times New Roman', Times, serif;
 font-weight: bold;
}
.hover-style{
 background-color: black;
}
.row-view-title,.column-view-title{
 margin-left: 20rpx;
 font-family: 'Times New Roman', Times, serif;
 font-weight: bold;
}
/*重要屬性：
 display: flex; //與display：box;是類似，是flexbox的最新語法格式，有更好的適配效果
 flex-direction: column; //表示子布局垂直布局
 flex-direction: row; //表示子布局為水平布局
*/

2.2 可滾動(dòng)視圖容器(scroll-view)

(1) 總結(jié)

(2) 例子

效果圖：

page.wxml

<view>
<text>水平滾動(dòng)布局</text>
</view>
<view class="x-view">
 <scroll-view class="scroll-view-x" scroll-x="true" bindscrolltoupper="scrollXToUpper" bindscrolltolower="scrollXToLower" bindscroll="scroll" scroll-left="0" scroll-into-view="pw_green">
  <view id="green" class="x_green"></view>
  <view id="red" class="x_red"></view>
  <view id="yellow" class="x_yellow"></view>
  <view id="blue" class="x_blue"></view>
 </scroll-view>
</view>
<view>
<text>垂直滾動(dòng)布局</text>
</view>
<view class="y-view">
 <scroll-view class="scroll-view-y" scroll-y="true" bindscrolltoupper="scrollYToUpper" bindscrolltolower="scrollYToLower" bindscroll="scroll" scroll-top="0" scroll-into-view="pw_green">
  <view id="green" class="y_green"></view>
  <view id="red" class="y_red"></view>
  <view id="yellow" class="y_yellow"></view>
  <view id="blue" class="y_blue"></view>
 </scroll-view>
</view>

page.wxss

.x_green{
 background-color: green;
 width: 500rpx;
 height: 300rpx;
 display: inline-flex;
}
.x_red{
 background-color: red;
 width: 500rpx;
 height: 300rpx;
 display: inline-flex;
 
}
.x_blue{
 background-color: blue;
 width: 500rpx;
 height: 300rpx;
 display: inline-flex; 
}
.x_yellow{
 background-color: yellow;
 width: 500rpx;
 height: 300rpx; 
 display: inline-flex; 
}
.y_green{
 background-color: green;
 width: 100%;
 height: 300rpx;
}
.y_red{
 background-color: red;
 width: 100%;
 height: 300rpx;
}
.y_yellow{
 background-color: yellow;
 width: 100%;
 height: 300rpx;
}
.y_blue{
 background-color: blue;
 width: 100%;
 height: 300rpx;
}
.scroll-view-x{
 display: flex;
 white-space: nowrap;
 width: 100%;
 margin-bottom: 20px;
 margin-top: 10px; 
 height: 300rpx; 
}
.scroll-view-y{
 height: 400rpx;
}
/*重要屬性：
 white-space: nowrap;//設(shè)置內(nèi)部元素不換行顯示，與display: inline-flex;屬性聯(lián)合使用才會(huì)有水平布局的效果
*/

page.js

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
//var color_index=['green','red','yellow','blue'];
Page({
 data:{
 toview:'red',
 },
/*滑動(dòng)到左邊觸發(fā)*/
scrollXToUpper:function(){
 console.log('scrollXToUpper')
},
/*滑動(dòng)到右邊觸發(fā) */
scrollXToLower:function(){
 console.log('scrollXToLower')
},
/*滑動(dòng)到頂部觸發(fā)*/
scrollYToUpper:function(){
 console.log('scrollYToUpper')
},
/*滑動(dòng)到左邊觸發(fā) */
scrollYToLower:function(){
 console.log('scrollYToLower')
},
/*滑動(dòng)觸發(fā) */
scroll:function(){
 console.log("scroll")
},
onLoad: function () {
 console.log('onLoad')
 var that = this
 },
})

2.3 滑塊視圖容器（swiper）

(1)總結(jié)

(2)例子

效果圖：

page.wxml

<swiper data-current="0" current="0" bindchange="itemChangeFunc" circular="true" indicator-dots="pw_indicatorDots"
 autoplay="pw_autoplay" interval="pw_interval" duration="pw_duration">
 <block wx:for="pw_imgUrls" wx:key="swiperkeys">
  <swiper-item>
  <image src="pw_item" class="slide-image" width="355" height="150"/>
  </swiper-item>
 </block>
</swiper>

page.js

//game.js
Page({
 data: {
 imgUrls: [
  '/image/wechat.png',
  'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
  'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
  'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
 ],
 indicatorDots: true,
 autoplay: true,
 interval: 3000,
 duration: 1000,
 current:1,
 },
 
 durationChange: function(e) {
 this.setData({
  duration: e.detail.value
 })
 },
 durationChange: function(e) {
 this.setData({
  duration: e.detail.value
 })
 },
itemChangeFunc:function(e){
 // console.log(e.target.dataset.current)
 
 console.log(e.detail)
}
})

以上是“微信小程序之UI與容器組件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：微信小程序之UI與容器組件的示例分析
瀏覽地址：http://chinadenli.net/article48/jhpshp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站維護(hù)、軟件開發(fā)、App設(shè)計(jì)、關(guān)鍵詞優(yōu)化、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)