這篇文章主要介紹了微信小程式UI與容器元件總結的相關資料,需要的朋友可以參考下
微信小程式UI與容器元件總結
1.總結與概述
2.容器元件
2.1 元件容器（view）
##
## 2.3 滑桿檢視容器（swiper）
1.總結與概述
#1.1 UI摘要圖
# 1.2 概述
小程式的UI元件也就是定義使用者介面的一系列標籤，類似html標籤。一個完整使用者回應過程：事件觸發－>UI元件接收到事件－>觸發js函數回應事件－>更新UI
2.容器元件
2.1 容器元件(view)
(1)總結
# (2)範例
效果圖
## page.wxml##rrrpage ##
<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>
登入後複製
2.2 可捲動檢視容器(scroll-view)
# (1) 總結
(2) 例子
效果圖：
page.wxml
.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; //表示子布局为水平布局
*/登入後複製
page.wxss
<view>
<text>水平滚动布局</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>垂直滚动布局</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.js
.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;//设置内部元素不换行显示，与display: inline-flex;属性联合使用才会有水平布局的效果
*/登入後複製
2.3 滑桿檢視容器（swiper）
(1)總結
#(2)範例
效果圖：
page.wxml
#
//index.js
//获取应用实例
var app = getApp()
//var color_index=['green','red','yellow','blue'];
Page({
data:{
toview:'red',
},
/*滑动到左边触发*/
scrollXToUpper:function(){
console.log('scrollXToUpper')
},
/*滑动到右边触发 */
scrollXToLower:function(){
console.log('scrollXToLower')
},
/*滑动到顶部触发*/
scrollYToUpper:function(){
console.log('scrollYToUpper')
},
/*滑动到左边触发 */
scrollYToLower:function(){
console.log('scrollYToLower')
},
/*滑动触发 */
scroll:function(){
console.log("scroll")
},
onLoad: function () {
console.log('onLoad')
var that = this
},
})登入後複製
page.js
<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>登入後複製
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
微信小程式button元件的使用介紹
#微信小程式textarea 的使用方法
微信小程式圖表外掛程式(wx-charts)的介紹
以上是微信小程式中UI與容器元件的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
