home.wxml 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!--pages/home/home.wxml-->
  2. <view>
  3. <button bind:tap="handleUser">设置用户名</button>
  4. <button bind:tap="getUser">获取用户名</button>
  5. <van-button type="default">默认按钮</van-button>
  6. <van-button type="primary">主要按钮</van-button>
  7. <van-button type="info">信息按钮</van-button>
  8. <van-button type="warning">警告按钮</van-button>
  9. <van-button type="danger">危险按钮</van-button>
  10. <headers></headers>
  11. <navigator url="/pages/detail/detail">前往详情</navigator>
  12. <view bind:tap="goDetail">去详情1</view>
  13. <view bind:tap="goDetail1">去详情2</view>
  14. <view bind:tap="goMy">去我的</view>
  15. <view bind:tap="goMy2">去我的</view>
  16. <view>哈哈哈哈</view>
  17. <template name="aa">
  18. <text>这是首页内容</text>
  19. </template>
  20. <!-- 数据绑定 -->
  21. <view class="first">我叫{{name}}</view>
  22. <!-- 列表渲染 -->
  23. <!-- 渲染:
  24. while、do while、for
  25. for in
  26. for of
  27. map
  28. forEach
  29. -->
  30. <!-- v-for="(item,index) in xxx" :key="index" -->
  31. <!-- wx:for -->
  32. <view wx:for="{{list}}" wx:key="index" wx:for-item="item">
  33. <view>
  34. {{index+1}}--{{item.name}}--{{item.age}}
  35. </view>
  36. </view>
  37. <!-- 条件渲染 -->
  38. <!--
  39. if else-if else
  40. switch case
  41. -->
  42. <!-- v-if v-else-if v-else -->
  43. <!-- wx:if wx:else wx:elif -->
  44. <view class="main" wx:if="{{age < 18}}">未成年</view>
  45. <view class="main" wx:elif="{{age == 18}}">成年</view>
  46. <view class="main" wx:else="{{age > 18}}">青年</view>
  47. <!-- 事件 -->
  48. <view class="box" catch:tap="handleBox">
  49. <view class="box1" catch:tap="handleBox1"></view>
  50. </view>
  51. <!-- swiper -->
  52. <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  53. <block wx:for="{{background}}" wx:key="*this">
  54. <swiper-item>
  55. <view class="swiper-item {{item}}"></view>
  56. </swiper-item>
  57. </block>
  58. </swiper>
  59. <!-- scroll-view -->
  60. <view class="page-section-spacing">
  61. <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
  62. <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
  63. <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
  64. <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
  65. <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
  66. <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
  67. <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
  68. <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
  69. <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
  70. <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
  71. </scroll-view>
  72. </view>
  73. </view>