home.wxml 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!--pages/home/home.wxml-->
  2. <header1></header1>
  3. 111
  4. <!--
  5. npm init 初始化项目
  6. 按照文档安装
  7. -->
  8. <navigator url="/pages/my/my">去列表</navigator>
  9. <view>hahah</view>
  10. <view bind:tap="getToDetail">详情页面</view>
  11. <view>
  12. 今天星期{{week}}
  13. <text>
  14. 我叫{{obj.name}},今年{{obj.age}}
  15. </text>
  16. </view>
  17. <!-- 列表渲染 -->
  18. <!-- v-for= 'item in arr' :key=index -->
  19. <view wx:for="{{arr}}" wx:for-item="item" wx:key="index">
  20. <view>
  21. {{index+1}}--我叫{{item.name}}--今年{{item.age}}
  22. </view>
  23. </view>
  24. <!-- 条件渲染 -->
  25. <view wx:if="{{obj.age < 18}}">未成年</view>
  26. <view wx:elif="{{obj.age == 18}}">刚成年</view>
  27. <view wx:else="{{obj.age > 18}}">成年人</view>
  28. <!-- 内置组件 -->
  29. <button bind:tap="getMain">哈哈哈</button>
  30. <input type="text" class="inp" bindtap="getCC" />
  31. <!-- 引用 -->
  32. <template name="news">
  33. <view>今天天气真好,今天是星期{{hoilday}}</view>
  34. </template>
  35. <template name="aa">
  36. <view>哈哈哈哈哈</view>
  37. </template>
  38. <view class="aa" catch:tap="getAA">
  39. <view class="bb" catch:tap="getBB"></view>
  40. </view>
  41. <!-- swiper -->
  42. <view class="swiper">
  43. <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  44. <block wx:for="{{background}}" wx:key="*this">
  45. <swiper-item>
  46. <view class="swiper-item {{item}}"></view>
  47. </swiper-item>
  48. </block>
  49. </swiper>
  50. </view>
  51. <!-- scroll-x 横滚 -->
  52. <view class="page-section-spacing">
  53. <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
  54. <view id="demo1" class="scroll-view-item_H demo-text-4"></view>
  55. <view id="demo2" class="scroll-view-item_H demo-text-5"></view>
  56. <view id="demo3" class="scroll-view-item_H demo-text-6"></view>
  57. <view id="demo1" class="scroll-view-item_H demo-text-4"></view>
  58. <view id="demo2" class="scroll-view-item_H demo-text-5"></view>
  59. <view id="demo3" class="scroll-view-item_H demo-text-6"></view>
  60. </scroll-view>
  61. </view>
  62. <!-- scroll-y 竖滚 -->
  63. <view class="page-section-spacing">
  64. <scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  65. <view id="demo1" class="scroll-view-item demo-text-7"></view>
  66. <view id="demo2" class="scroll-view-item demo-text-8"></view>
  67. <view id="demo3" class="scroll-view-item demo-text-9"></view>
  68. <view id="demo1" class="scroll-view-item demo-text-7"></view>
  69. <view id="demo2" class="scroll-view-item demo-text-8"></view>
  70. <view id="demo3" class="scroll-view-item demo-text-9"></view>
  71. </scroll-view>
  72. </view>