小程序UI与容器组件

版权声明:欢迎分享,但请注明出处,谢谢 https://blog.csdn.net/qq_28057577/article/details/55659346

目录

    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. <view>
  2. <text class="row-view-title">水平布局:</text>
  3. <view class="flex-wrp-row">
  4. <view class="flex-item-red" hover="true" hover-class="hover-style"><text class="color-text">red</text></view>
  5. <view class="flex-item-green" hover="true" hover-class="hover-style"><text class="color-text">green</text></view>
  6. <view class="flex-item-blue" hover="true" hover-class="hover-style"><text class="color-text">blue</text></view>
  7. </view>
  8. </view>
  9. <view>
  10. <text class="column-view-title">垂直布局:</text>
  11. <view class="flex-wrp-column" >
  12. <view class="flex-item-red" hover="true" hover-class="hover-style"><text class="color-text" >red</text></view>
  13. <view class="flex-item-green" hover="true" hover-class="hover-style"><text class="color-text">green</text></view>
  14. <view class="flex-item-blue" hover="true" hover-class="hover-style"><text class="color-text">blue</text></view>
  15. </view>
  16. </view>

        page.wxss
  1. .flex-item-red{
  2. background-color: red;
  3. height: 200rpx;
  4. width: 200rpx;
  5. text-align: center;
  6. line-height: 200rpx;
  7. }
  8. .flex-item-green{
  9. background-color: green;
  10. height: 200rpx;
  11. width: 200rpx;
  12. text-align: center;
  13. line-height: 200rpx
  14. }
  15. .flex-item-blue{
  16. background-color: blue;
  17. height: 200rpx;
  18. width: 200rpx;
  19. text-align: center;
  20. line-height: 200rpx
  21. }
  22. .flex-wrp-row{
  23. flex-direction: row;
  24. display: flex;
  25. margin-left: 10rpx;
  26. margin-top: 20rpx;
  27. }
  28. .flex-wrp-column{
  29. flex-direction: column;
  30. display: flex;
  31. margin-left: 10rpx;
  32. margin-top: 20rpx;
  33. }
  34. .color-text{
  35. color: snow;
  36. font-family: 'Times New Roman', Times, serif;
  37. font-weight: bold;
  38. }
  39. .hover-style{
  40. background-color: black;
  41. }
  42. .row-view-title,.column-view-title{
  43. margin-left: 20rpx;
  44. font-family: 'Times New Roman', Times, serif;
  45. font-weight: bold;
  46. }
  47. /*重要属性:
  48. display: flex; //与display:box;是类似,是flexbox的最新语法格式,有更好的适配效果
  49. flex-direction: column; //表示子布局垂直布局
  50. flex-direction: row; //表示子布局为水平布局
  51. */
 2.2 可滚动视图容器(scroll-view)
    (1) 总结


     (2) 例子
       效果图:

     page.wxml
  1. <view>
  2. <text>水平滚动布局</text>
  3. </view>
  4. <view class="x-view">
  5. <scroll-view class="scroll-view-x" scroll-x="true" bindscrolltoupper="scrollXToUpper" bindscrolltolower="scrollXToLower" bindscroll="scroll" scroll-left="0" scroll-into-view="{{green}}">
  6. <view id="green" class="x_green"></view>
  7. <view id="red" class="x_red"></view>
  8. <view id="yellow" class="x_yellow"></view>
  9. <view id="blue" class="x_blue"></view>
  10. </scroll-view>
  11. </view>
  12. <view>
  13. <text>垂直滚动布局</text>
  14. </view>
  15. <view class="y-view">
  16. <scroll-view class="scroll-view-y" scroll-y="true" bindscrolltoupper="scrollYToUpper" bindscrolltolower="scrollYToLower" bindscroll="scroll" scroll-top="0" scroll-into-view="{{green}}">
  17. <view id="green" class="y_green"></view>
  18. <view id="red" class="y_red"></view>
  19. <view id="yellow" class="y_yellow"></view>
  20. <view id="blue" class="y_blue"></view>
  21. </scroll-view>
  22. </view>
    page.wxss
  1. .x_green{
  2. background-color: green;
  3. width: 500rpx;
  4. height: 300rpx;
  5. display: inline-flex;
  6. }
  7. .x_red{
  8. background-color: red;
  9. width: 500rpx;
  10. height: 300rpx;
  11. display: inline-flex;
  12. }
  13. .x_blue{
  14. background-color: blue;
  15. width: 500rpx;
  16. height: 300rpx;
  17. display: inline-flex;
  18. }
  19. .x_yellow{
  20. background-color: yellow;
  21. width: 500rpx;
  22. height: 300rpx;
  23. display: inline-flex;
  24. }
  25. .y_green{
  26. background-color: green;
  27. width: 100%;
  28. height: 300rpx;
  29. }
  30. .y_red{
  31. background-color: red;
  32. width: 100%;
  33. height: 300rpx;
  34. }
  35. .y_yellow{
  36. background-color: yellow;
  37. width: 100%;
  38. height: 300rpx;
  39. }
  40. .y_blue{
  41. background-color: blue;
  42. width: 100%;
  43. height: 300rpx;
  44. }
  45. .scroll-view-x{
  46. display: flex;
  47. white-space: nowrap;
  48. width: 100%;
  49. margin-bottom: 20px;
  50. margin-top: 10px;
  51. height: 300rpx;
  52. }
  53. .scroll-view-y{
  54. height: 400rpx;
  55. }
  56. /*重要属性:
  57. white-space: nowrap;//设置内部元素不换行显示,与display: inline-flex;属性联合使用才会有水平布局的效果
  58. */
    page.js
  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. //var color_index=['green','red','yellow','blue'];
  5. Page({
  6. data:{
  7. toview:'red',
  8. },
  9. /*滑动到左边触发*/
  10. scrollXToUpper:function(){
  11. console.log('scrollXToUpper')
  12. },
  13. /*滑动到右边触发 */
  14. scrollXToLower:function(){
  15. console.log('scrollXToLower')
  16. },
  17. /*滑动到顶部触发*/
  18. scrollYToUpper:function(){
  19. console.log('scrollYToUpper')
  20. },
  21. /*滑动到左边触发 */
  22. scrollYToLower:function(){
  23. console.log('scrollYToLower')
  24. },
  25. /*滑动触发 */
  26. scroll:function(){
  27. console.log("scroll")
  28. },
  29. onLoad: function () {
  30. console.log('onLoad')
  31. var that = this
  32. },
  33. })

2.3 滑块视图容器(swiper)

 (1)总结

(2)例子

    效果图:

     page.wxml
  1. <swiper data-current="0" current="0" bindchange="itemChangeFunc" circular="true" indicator-dots="{{indicatorDots}}"
  2. autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  3. <block wx:for="{{imgUrls}}" wx:key="swiperkeys">
  4. <swiper-item>
  5. <image src="{{item}}" class="slide-image" width="355" height="150"/>
  6. </swiper-item>
  7. </block>
  8. </swiper>

    page.js
  1. //game.js
  2. Page({
  3. data: {
  4. imgUrls: [
  5. '/image/wechat.png',
  6. 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
  7. 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
  8. 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
  9. ],
  10. indicatorDots: true,
  11. autoplay: true,
  12. interval: 3000,
  13. duration: 1000,
  14. current:1,
  15. },
  16. durationChange: function(e) {
  17. this.setData({
  18. duration: e.detail.value
  19. })
  20. },
  21. durationChange: function(e) {
  22. this.setData({
  23. duration: e.detail.value
  24. })
  25. },
  26. itemChangeFunc:function(e){
  27. // console.log(e.target.dataset.current)
  28. console.log(e.detail)
  29. }
  30. })

阅读更多

没有更多推荐了,返回首页