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


微信小程序学习记录《三》:视图容器 1. Viewflex-direction:row:横向布局模式;如果不设置该属性,默认为横向 flex-direction:column:纵向布局。界面样式代码注意:1.如果想要改 模式有效,父控件必须设置显示方式为 flex 模式,display:flex; 2.要想控件的 ... 1. View flex-direction:row:横向布局模式;如果不设置该属性,默认为横向 flex-direction:column:纵向布局。 界面样式代码 注意:1.如果想要改模式有效,父控件必须设置显示方式为 flex 模式,display:flex; 2.要想控件的背景颜色显示出来,必须 view 设置大小,否则 background-color 属性无效。 2.scroll-view [html] view plain copy 1. 2. vertical scroll 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. horizontal scroll 18. 19. 20. 21. 22. 23. 24. 界面渲染代码: [css] view plain copy 1. .section { 2. display: flex; 3. flex-direction: column; 4. } 5. /*设置垂直滚动每个滑动块高度*/ 6. .scroll-view-item { 7. height: 100px; 8. } 9. /*设置中间两个按钮的位置*/ 10. .btn-area { 11. height: 80px; 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-space: nowrap; 27. } 28. /*设置水平滚动的所有元素的大小,view 默认为块元素,会自动换行,所以必须设置为行内元素*/ 29. .scroll-view-item_H { 30. width: 150px; 31. height: 100px; 32. display: inline-block; 33. } 34. /*设置每个 View 的背景颜色*/ 35. .bc_green { 36. background-color: green; 37. } 38. .bc_red { 39. background-color: red; 40. } 41. .bc_blue { 42. background-color: blue; 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 = ['red', 'yellow', 'blue', 'green', 'red'] 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 的展示 界面渲染代码: [css] view plain copy 1. .btn { 2. display: flex; 3. flex-direction: column; 4. height: 400px; 5. justify-content: space-around; 6. text-align: center; 7. }
还剩12页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

sun7484

贡献于2017-03-23

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf