首頁 > 微信小程式 > 小程式開發 > 微信小程式之UI與容器元件介紹

微信小程式之UI與容器元件介紹

巴扎黑
發布: 2017-09-19 09:24:40
原創
2536 人瀏覽過

微信小程序 UI与容器组件总结

   1.总结与概述

   2.容器组件

           2.1 组件容器(view)

           2.2 可滚动视图容器(scroll-view)

           2.3 滑块视图容器(swiper)

1.总结与概述

1.1 UI组件总结图

1.2 概述

       小程序的UI组件也就是定义用户界面的一系列标签,类似于html标签。一个完整用户响应过程:事件触发——>UI组件接收到事件——>触发js函数响应事件——>更新UI

2.容器组件

2.1 容器组件(view)

   (1)总结



   (2)例子

       效果图



       page.wxml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

.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 可滚动视图容器(scroll-view)

(1) 总结



(2) 例子

效果图:



page.wxml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<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="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>垂直滚动布局</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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

.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;属性联合使用才会有水平布局的效果

*/

登入後複製

page.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

//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

 },

})

登入後複製

2.3 滑块视图容器(swiper)

(1)总结



(2)例子

效果图:



page.wxml

1

2

3

4

5

6

7

8

<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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

//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與容器元件介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
現在個人嫩申請微信小程序
來自於 1970-01-01 08:00:00
0
0
0
javascript - 小程式中遇到js執行時序問題
來自於 1970-01-01 08:00:00
0
0
0
用php如何產生小程式的小程式碼?
來自於 1970-01-01 08:00:00
0
0
0
微信小程式
來自於 1970-01-01 08:00:00
0
0
0
小程式可以用來開發功能性程式嗎?
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板