scrollList.nvue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title" style="margin-bottom: 15px;">基础使用</text>
  5. <u-scroll-list
  6. indicatorColor="#fff0f0"
  7. indicatorActiveColor="#f56c6c"
  8. @right="right"
  9. @left="left"
  10. >
  11. <view
  12. class="scroll-list"
  13. style="flex-direction: row;"
  14. >
  15. <view
  16. class="scroll-list__goods-item"
  17. v-for="(item, index) in goodsArr"
  18. :key="index"
  19. :class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
  20. >
  21. <image
  22. class="scroll-list__goods-item__image"
  23. :src="goodsBaseUrl + item.thumbnail"
  24. mode=""
  25. ></image>
  26. <text class="scroll-list__goods-item__text">¥{{ item.price }}</text>
  27. </view>
  28. <view
  29. class="scroll-list__show-more"
  30. @tap="showMore"
  31. >
  32. <text class="scroll-list__show-more__text">查看更多</text>
  33. <u-icon
  34. name="arrow-leftward"
  35. color="#f56c6c"
  36. size="12"
  37. ></u-icon>
  38. </view>
  39. </view>
  40. </u-scroll-list>
  41. </view>
  42. <view class="u-demo-block">
  43. <text class="u-demo-block__title">多菜单扩展</text>
  44. <u-scroll-list>
  45. <view class="scroll-list">
  46. <view
  47. class="scroll-list__line"
  48. v-for="(item, index) in menuArr"
  49. :key="index"
  50. >
  51. <view
  52. class="scroll-list__line__item"
  53. v-for="(item1, index1) in item"
  54. :key="index1"
  55. :class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']"
  56. >
  57. <image
  58. class="scroll-list__line__item__image"
  59. :src="menuBaseUrl + item1.icon"
  60. mode=""
  61. ></image>
  62. <text class="scroll-list__line__item__text">{{ item1.name }}</text>
  63. </view>
  64. </view>
  65. </view>
  66. </u-scroll-list>
  67. </view>
  68. </view>
  69. </template>
  70. <script>
  71. export default {
  72. data() {
  73. return {
  74. goodsBaseUrl: 'https://cdn.uviewui.com/uview/goods/',
  75. menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
  76. goodsArr: [{
  77. price: '230.5',
  78. thumbnail: '1.jpg'
  79. },
  80. {
  81. price: '74.1',
  82. thumbnail: '2.jpg'
  83. },
  84. {
  85. price: '8457',
  86. thumbnail: '6.jpg'
  87. },
  88. {
  89. price: '1442',
  90. thumbnail: '5.jpg'
  91. },
  92. {
  93. price: '541',
  94. thumbnail: '2.jpg'
  95. },
  96. {
  97. price: '234',
  98. thumbnail: '3.jpg'
  99. },
  100. {
  101. price: '562',
  102. thumbnail: '4.jpg'
  103. },
  104. {
  105. price: '251.5',
  106. thumbnail: '1.jpg'
  107. }
  108. ],
  109. menuArr: [
  110. [{
  111. name: '天猫新品',
  112. icon: '11.png'
  113. },
  114. {
  115. name: '今日爆款',
  116. icon: '9.png'
  117. }, {
  118. name: '天猫国际',
  119. icon: '17.png'
  120. }, {
  121. name: '饿了么',
  122. icon: '6.png'
  123. }, {
  124. name: '天猫超市',
  125. icon: '11.png'
  126. }, {
  127. name: '分类',
  128. icon: '2.png'
  129. }, {
  130. name: '天猫美食',
  131. icon: '3.png'
  132. }, {
  133. name: '阿里健康',
  134. icon: '12.png'
  135. }, {
  136. name: '口碑生活',
  137. icon: '7.png'
  138. }
  139. ],
  140. [{
  141. name: '充值中心',
  142. icon: '8.png'
  143. },
  144. {
  145. name: '机票酒店',
  146. icon: '10.png'
  147. }, {
  148. name: '金币庄园',
  149. icon: '18.png'
  150. }, {
  151. name: '阿里拍卖',
  152. icon: '15.png'
  153. }, {
  154. name: '淘宝吃货',
  155. icon: '16.png'
  156. }, {
  157. name: '闲鱼',
  158. icon: '4.png'
  159. }, {
  160. name: '会员中心',
  161. icon: '6.png'
  162. }, {
  163. name: '造点新货',
  164. icon: '13.png'
  165. }, {
  166. name: '土货鲜食',
  167. icon: '14.png'
  168. }
  169. ]
  170. ]
  171. }
  172. },
  173. methods: {
  174. showMore() {
  175. uni.$u.toast('查看更多')
  176. },
  177. left() {
  178. console.log('left');
  179. },
  180. right() {
  181. console.log('right');
  182. }
  183. },
  184. }
  185. </script>
  186. <style lang="scss">
  187. .scroll-list {
  188. @include flex(column);
  189. &__goods-item {
  190. margin-right: 20px;
  191. &__image {
  192. width: 60px;
  193. height: 60px;
  194. border-radius: 4px;
  195. }
  196. &__text {
  197. color: #f56c6c;
  198. text-align: center;
  199. font-size: 12px;
  200. margin-top: 5px;
  201. }
  202. }
  203. &__show-more {
  204. background-color: #fff0f0;
  205. border-radius: 3px;
  206. padding: 3px 6px;
  207. @include flex(column);
  208. align-items: center;
  209. &__text {
  210. font-size: 12px;
  211. width: 12px;
  212. color: #f56c6c;
  213. line-height: 16px;
  214. }
  215. }
  216. &__line {
  217. @include flex;
  218. margin-top: 10px;
  219. &__item {
  220. margin-right: 15px;
  221. &__image {
  222. width: 61px;
  223. height: 48px;
  224. }
  225. &__text {
  226. margin-top: 5px;
  227. color: $u-content-color;
  228. font-size: 12px;
  229. text-align: center;
  230. }
  231. &--no-margin-right {
  232. margin-right: 0;
  233. }
  234. }
  235. }
  236. }
  237. </style>