微信小程序 UI與容器組件總結(jié)
更新時(shí)間：2017年02月21日 15:28:25 作者：小巷下起了雨
這篇文章主要介紹了微信小程序 UI與容器組件總結(jié)的相關(guān)資料,需要的朋友可以參考下
微信小程序 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)過(guò)程：事件觸發(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的最新語(yǔ)法格式，有更好的適配效果
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="{{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="{{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="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="swiperkeys">
<swiper-item>
<image src="{{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)
}
})
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
詳解無(wú)界微前端是如何渲染子應(yīng)用的demo解析
這篇文章主要為大家介紹了詳解無(wú)界微前端是如何渲染子應(yīng)用demo解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
WindiCSS實(shí)現(xiàn)加載windi.config.ts配置文件詳解
這篇文章主要為大家介紹了WindiCSS實(shí)現(xiàn)加載windi.config.ts配置文件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了微信小程序 video組件詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09
微信小程序頁(yè)面開(kāi)發(fā)注意事項(xiàng)整理
這篇文章主要介紹了微信小程序頁(yè)面開(kāi)發(fā)注意事項(xiàng)整理的相關(guān)資料,需要的朋友可以參考下2017-05-05
微信小程序 ES6Promise.all批量上傳文件實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序 ES6Promise.all批量上傳文件實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04
在JavaScript中所有的異常都是Error對(duì)象，遇到異常就會(huì)拋出一個(gè)Error對(duì)象,這個(gè)對(duì)象中包含錯(cuò)誤的描述信息，通過(guò)JavaScript提供的異常處理語(yǔ)句,我們可以用結(jié)構(gòu)化的方式來(lái)捕捉發(fā)生的錯(cuò)誤,讓異常處理代碼與核心業(yè)務(wù)代碼實(shí)現(xiàn)分離,需要的朋友可以參考一下2021-12-12
reduce探索lodash.reduce實(shí)現(xiàn)原理解析
這篇文章主要為大家介紹了reduce探索lodash.reduce實(shí)現(xiàn)原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
'2'>'10'==true?解析JS如何進(jìn)行隱式類型轉(zhuǎn)換
這篇文章主要為大家介紹了'2'>'10'==true?解析JS如何進(jìn)行隱式類型轉(zhuǎn)換示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
JS前端架構(gòu)pnpm構(gòu)建Monorepo方式管理demo
這篇文章主要為大家介紹了JS前端架構(gòu)pnpm構(gòu)建Monorepo方式的管理demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Meta開(kāi)源JavaScript內(nèi)存泄漏監(jiān)測(cè)工具M(jìn)emLab安裝使用
這篇文章主要為大家介紹了Meta開(kāi)源JavaScript內(nèi)存泄漏監(jiān)測(cè)工具M(jìn)emLab安裝使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09