AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:02:47

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序学习实践记录《三》:视图容器,icon
相关的资讯,希望对您有帮助。

微信小程序学习实践记录《三》:视图容器,icon

一:视图容器1. Viewflex-direction:row:横向布局模式;如果不设置该属性,默认为横向flex-direction:column:纵向布局。界面样式代码注意:1.如果想要改模式有效,父控件必须设置显示方式为flex模式,display:flex; ...

一:视图容器

1. View

flex-direction:row:横向布局模式;如果不设置该属性,默认为横向

flex-direction:column:纵向布局。

界面样式代码

注意:1.如果想要改模式有效,父控件必须设置显示方式为flex模式,display:flex;

           2.要想控件的背景颜色显示出来,必须view设置大小,否则background-color属性无效。

2.scroll-view

[html] view plain copy
  1. <view class=section>  
  2.   <view class=section__title>vertical scrollview>  
  3.     
  4.   <scroll-view scroll-y=true style=height: 200px; bindscrolltoupper=upper bindscrolltolower=lower bindscroll=scroll scroll-into-view={{toView}} scroll-top={{scrollTop}}>  
  5.     <view id=green class=scroll-view-item bc_green>view>  
  6.     <view id=red  class=scroll-view-item bc_red>view>  
  7.     <view id=yellow class=scroll-view-item bc_yellow>view>  
  8.     <view id=blue class=scroll-view-item bc_blue>view>  
  9.   scroll-view>  
  10.   
  11.   <view class=btn-area>  
  12.     <button size=mini bindtap=tap>click me to scroll into view button>  
  13.     <button size=mini bindtap=tapMove>click me to scrollbutton>  
  14.   view>  
  15. view>  
  16. <view class=section section_gap>  
  17.   <view class=section__title>horizontal scrollview>  
  18.   <scroll-view class=scroll-view_H scroll-x=true style=width: 100%>  
  19.     <view id=green class=scroll-view-item_H bc_green>view>  
  20.     <view id=red  class=scroll-view-item_H bc_red>view>  
  21.     <view id=yellow class=scroll-view-item_H bc_yellow>view>  
  22.     <view id=blue class=scroll-view-item_H bc_blue>view>  
  23.   scroll-view>  
  24. view>  

界面渲染代码:

  1. .section {  
  2.   display: flex;  
  3.   flex-direction: column;  
  4. }  
  5. /*设置垂直滚动每个滑动块高度*/  
  6. .scroll-view-item {  
  7.   height100px;  
  8. }  
  9. /*设置中间两个按钮的位置*/  
  10. .btn-area {  
  11.   height80px;  
  12.   justify-content: space-around;  
  13.   display: flex;  
  14.   flex-direction: column;  
  15. }  
  16. /*设置水平滚动视图,该属性必须设置为nowrap,表示超出范围也不换行 
  17. white-white-space属性的值 
  18.     normal: 自动换行(默认.内容超过父控件宽度换行) 
  19.     pre: 保持HTML源代码的空格与换行,等同与pre标签,识别空格和换行符 
  20.     nowrap: 不换行,超出范围的隐藏 
  21.     pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行 
  22.     pre-line: 同pre属性,但是遇到连续空格会被看作一个空格 
  23.     inherit: 继承 
  24. */  
  25. .scroll-view_H {  
  26.   white-spacenowrap;  
  27. }  
  28. /*设置水平滚动的所有元素的大小,view默认为块元素,会自动换行,所以必须设置为行内元素*/  
  29. .scroll-view-item_H {  
  30.   width150px;  
  31.   height100px;  
  32.   display: inline-block;   
  33. }  
  34. /*设置每个View的背景颜色*/  
  35. .bc_green {  
  36.   background-colorgreen;  
  37. }  
  38. .bc_red {  
  39.   background-colorred;  
  40. }  
  41. .bc_blue {  
  42.   background-colorblue;  
  43. }  
  44. .bc_yellow {  
  45.   background-color: yellow;  
  46. }  
页面交互代码:

[javascript] view plain copy
  1. //logs.js  
  2. var util = require(../../utils/util.js)  
  3. var order = [redyellowbluegreenred]  
  4. Page({  
  5.   data: {  
  6.     //元素的IDID,通过修改这个,实现点击把这个元素滚动到顶部  
  7.     toView: red,  
  8.     //默认你已经滚动的距离  
  9.     scrollTop: 100  
  10.   },  
  11.   upper: function(e) {  
  12.     console.log(e)  
  13.   },  
  14.   lower: function(e) {  
  15.     console.log(e)  
  16.   },  
  17.   scroll: function(e) {  
  18.     console.log(e)  
  19.   },  
  20.   //点击改变要滚动到顶部的元素ID  
  21.   tap: function(e) {  
  22.     for (var i = 0; i < order.length; ++i) {  
  23.       if (order[i] === this.data.toView) {  
  24.         //动态刷新数据,向上滚动一页  
  25.         this.setData({  
  26.           toView: order[i + 1]  
  27.         })  
  28.         break  
  29.       }  
  30.     }  
  31.   },  
  32.   //点击一次滚动10  
  33.   tapMove: function(e) {  
  34.     this.setData({  
  35.       scrollTop: this.data.scrollTop + 10  
  36.     })  
  37.   }  
  38. })  

3.swiper 主要用于图片轮播,广告banner的展示

界面渲染代码:

  1. .btn {  
  2.   display: flex;  
  3.   flex-direction: column;  
  4.   height400px;  
  5.   justify-content: space-around;  
  6.   text-aligncenter;  
  7. }  
二:icon

icon 图标

type 属性对icon的影响:


size 对icon的影响:


color 对icon的影响:


22阅读 | 0评论
你的回应
写文章

7013