grid.nvue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基本案例</text>
  5. <view>
  6. <u-grid
  7. :border="false"
  8. @click="click"
  9. align="center"
  10. >
  11. <u-grid-item
  12. v-for="(baseListItem,baseListIndex) in baseList"
  13. :key="baseListIndex"
  14. >
  15. <u-icon
  16. :customStyle="{paddingTop:20+'rpx'}"
  17. :name="baseListItem.name"
  18. :size="22"
  19. ></u-icon>
  20. <text class="grid-text">{{baseListItem.title}}</text>
  21. </u-grid-item>
  22. </u-grid>
  23. </view>
  24. </view>
  25. <view class="u-demo-block">
  26. <text class="u-demo-block__title">显示边框</text>
  27. <view>
  28. <u-grid :border="true">
  29. <u-grid-item
  30. v-for="(listItem,listIndex) in list"
  31. :key="listIndex"
  32. customStyle="padding-top: 10px; padding-bottom: 10px"
  33. >
  34. <u-icon
  35. :customStyle="{paddingTop:20+'rpx'}"
  36. :name="listItem.name"
  37. :size="22"
  38. ></u-icon>
  39. <text class="grid-text">{{listItem.title}}</text>
  40. </u-grid-item>
  41. </u-grid>
  42. </view>
  43. </view>
  44. <view class="u-demo-block">
  45. <text class="u-demo-block__title">绑定点击事件&自定义列数</text>
  46. <view>
  47. <u-grid
  48. :border="false"
  49. col="4"
  50. >
  51. <u-grid-item
  52. v-for="(listItem,listIndex) in list"
  53. :key="listIndex"
  54. customStyle="padding-top: 10px; padding-bottom: 10px"
  55. >
  56. <u-icon
  57. :customStyle="{paddingTop:20+'rpx'}"
  58. :name="listItem.name"
  59. :size="22"
  60. ></u-icon>
  61. <text class="grid-text">{{listItem.title}}</text>
  62. </u-grid-item>
  63. </u-grid>
  64. </view>
  65. </view>
  66. <view class="u-demo-block">
  67. <text class="u-demo-block__title">可滑动</text>
  68. <view>
  69. <swiper
  70. :indicator-dots="true"
  71. class="swiper"
  72. >
  73. <swiper-item>
  74. <u-grid :border="true">
  75. <u-grid-item
  76. v-for="(item, index) in swiperList"
  77. :index="index"
  78. :key="index"
  79. >
  80. <u-icon
  81. :customStyle="{paddingTop:20+'rpx'}"
  82. :name="item"
  83. :size="22"
  84. ></u-icon>
  85. <text class="grid-text">{{ '宫格' + (index + 1) }}</text>
  86. </u-grid-item>
  87. </u-grid>
  88. </swiper-item>
  89. <swiper-item>
  90. <u-grid :border="true">
  91. <u-grid-item
  92. v-for="(item, index) in swiperList"
  93. :index="index + 9"
  94. :key="index"
  95. >
  96. <u-icon
  97. :customStyle="{paddingTop:20+'rpx'}"
  98. :name="item"
  99. :size="22"
  100. ></u-icon>
  101. <text class="grid-text">{{ '宫格' + (index + 1) }}</text>
  102. </u-grid-item>
  103. </u-grid>
  104. </swiper-item>
  105. <swiper-item>
  106. <u-grid :border="true">
  107. <u-grid-item
  108. v-for="(item, index) in swiperList"
  109. :index="index + 18"
  110. :key="index"
  111. >
  112. <u-icon
  113. :customStyle="{paddingTop:20+'rpx'}"
  114. :name="item"
  115. :size="22"
  116. ></u-icon>
  117. <text class="grid-text">{{ "宫格" + (index + 1) }}</text>
  118. </u-grid-item>
  119. </u-grid>
  120. </swiper-item>
  121. </swiper>
  122. </view>
  123. </view>
  124. <u-toast ref="uToast" />
  125. </view>
  126. </template>
  127. <script>
  128. export default {
  129. data() {
  130. return {
  131. baseList: [{
  132. name: 'photo',
  133. title: '图片'
  134. },
  135. {
  136. name: 'lock',
  137. title: '锁头'
  138. },
  139. // {
  140. // name: 'star',
  141. // title: '星星'
  142. // },
  143. ],
  144. list: [{
  145. name: 'photo',
  146. title: '图片'
  147. },
  148. {
  149. name: 'lock',
  150. title: '锁头'
  151. },
  152. {
  153. name: 'star',
  154. title: '星星'
  155. },
  156. {
  157. name: 'hourglass',
  158. title: '沙漏'
  159. },
  160. {
  161. name: 'home',
  162. title: '首页'
  163. },
  164. {
  165. name: 'volume',
  166. title: '音量'
  167. },
  168. ],
  169. swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'],
  170. }
  171. },
  172. methods: {
  173. click(name) {
  174. this.$refs.uToast.success(`点击了第${name}个`)
  175. }
  176. }
  177. }
  178. </script>
  179. <style lang="scss">
  180. .swiper {
  181. height: 220px;
  182. }
  183. .grid-text {
  184. font-size: 14px;
  185. color: #909399;
  186. padding: 10rpx 0 20rpx 0rpx;
  187. /* #ifndef APP-PLUS */
  188. box-sizing: border-box;
  189. /* #endif */
  190. }
  191. </style>