WeChat-Applet-Benutzeroberfläche und Containerkomponenten

高洛峰
Freigeben: 2017-02-25 09:15:43
Original
1952 Leute haben es durchsucht

Zusammenfassung der Benutzeroberfläche und der Containerkomponenten des WeChat Mini-Programms

1. Zusammenfassung und Übersicht

2. Containerkomponenten

2.1 Komponente Container (Ansicht)

2.2 Scroll-Ansicht Container (Scroll-Ansicht)

2.3 Slider-Ansicht Container (Swiper)

1. Zusammenfassung und Übersicht

1.1 Übersichtsdiagramm der UI-Komponenten微信小程序 UI与容器组件

1.2 Übersicht

UI des Mini Programm Eine Komponente ist eine Reihe von Tags, die eine Benutzeroberfläche definieren, ähnlich wie HTML-Tags. Ein vollständiger Benutzerreaktionsprozess: Ereignisauslösung – > UI-Komponente empfängt Ereignis – > löst js-Funktion aus, um auf Ereignis zu reagieren – > 2. Containerkomponente

2.1 Containerkomponente (Ansicht)

(1) Zusammenfassung


(2) Beispiel微信小程序 UI与容器组件
Rendering


page.wxml微信小程序 UI与容器组件

page.wxss
<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>
Nach dem Login kopieren

.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: &#39;Times New Roman&#39;, Times, serif;
 font-weight: bold;
}
.hover-style{
 background-color: black;
}
.row-view-title,.column-view-title{
 margin-left: 20rpx;
 font-family: &#39;Times New Roman&#39;, Times, serif;
 font-weight: bold;
}
/*重要属性:
 display: flex; //与display:box;是类似,是flexbox的最新语法格式,有更好的适配效果
 flex-direction: column; //表示子布局垂直布局
 flex-direction: row; //表示子布局为水平布局
*/
Nach dem Login kopieren
2.2 Scroll-View-Container (Scroll-View)

(1) Zusammenfassung


(2) Beispiel微信小程序 UI与容器组件
Rendering:


page.wxml微信小程序 UI与容器组件


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>
Nach dem Login kopieren

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;属性联合使用才会有水平布局的效果
*/
Nach dem Login kopieren

//index.js
//获取应用实例
var app = getApp()
//var color_index=[&#39;green&#39;,&#39;red&#39;,&#39;yellow&#39;,&#39;blue&#39;];
Page({
 data:{
 toview:&#39;red&#39;,
 },
/*滑动到左边触发*/
scrollXToUpper:function(){
 console.log(&#39;scrollXToUpper&#39;)
},
/*滑动到右边触发 */
scrollXToLower:function(){
 console.log(&#39;scrollXToLower&#39;)
},
/*滑动到顶部触发*/
scrollYToUpper:function(){
 console.log(&#39;scrollYToUpper&#39;)
},
/*滑动到左边触发 */
scrollYToLower:function(){
 console.log(&#39;scrollYToLower&#39;)
},
/*滑动触发 */
scroll:function(){
 console.log("scroll")
},
onLoad: function () {
 console.log(&#39;onLoad&#39;)
 var that = this
 },
})
Nach dem Login kopieren
2.3 Slider-Ansichtscontainer (Swiper)

(1) Zusammenfassung


(2) Beispiel微信小程序 UI与容器组件
Rendering:


page.wxml微信小程序 UI与容器组件

Seite .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>
Nach dem Login kopieren

Vielen Dank fürs Lesen, ich hoffe, es kann allen helfen, vielen Dank für Ihre Unterstützung dieser Website!
//game.js
Page({
 data: {
 imgUrls: [
  &#39;/image/wechat.png&#39;,
  &#39;http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg&#39;,
  &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg&#39;,
  &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg&#39;
 ],
 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)
}
})
Nach dem Login kopieren

Weitere Artikel zur WeChat-Applet-Benutzeroberfläche und Containerkomponenten finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!