home.wxml 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <!--pages/home/home.wxml-->
  2. <view>
  3. <headers></headers>
  4. <view>哈哈哈哈</view>
  5. <template name="aa">
  6. <text>这是首页内容</text>
  7. </template>
  8. <!-- 数据绑定 -->
  9. <view class="first">我叫{{name}}</view>
  10. <!-- 列表渲染 -->
  11. <!-- 渲染:
  12. while、do while、for
  13. for in
  14. for of
  15. map
  16. forEach
  17. -->
  18. <!-- v-for="(item,index) in xxx" :key="index" -->
  19. <!-- wx:for -->
  20. <view wx:for="{{list}}" wx:key="index" wx:for-item="item">
  21. <view>
  22. {{index+1}}--{{item.name}}--{{item.age}}
  23. </view>
  24. </view>
  25. <!-- 条件渲染 -->
  26. <!--
  27. if else-if else
  28. switch case
  29. -->
  30. <!-- v-if v-else-if v-else -->
  31. <!-- wx:if wx:else wx:elif -->
  32. <view class="main" wx:if="{{age < 18}}">未成年</view>
  33. <view class="main" wx:elif="{{age == 18}}">成年</view>
  34. <view class="main" wx:else="{{age > 18}}">青年</view>
  35. <!-- 事件 -->
  36. <view class="box" catch:tap="handleBox">
  37. <view class="box1" catch:tap="handleBox1"></view>
  38. </view>
  39. <!-- swiper -->
  40. <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  41. <block wx:for="{{background}}" wx:key="*this">
  42. <swiper-item>
  43. <view class="swiper-item {{item}}"></view>
  44. </swiper-item>
  45. </block>
  46. </swiper>
  47. <!-- scroll-view -->
  48. <view class="page-section-spacing">
  49. <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
  50. <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
  51. <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
  52. <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
  53. <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
  54. <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
  55. <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
  56. <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
  57. <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
  58. <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
  59. </scroll-view>
  60. </view>
  61. </view>