swiper.nvue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基础功能</text>
  5. <u-swiper
  6. :list="list1"
  7. @change="change"
  8. @click="click"
  9. ></u-swiper>
  10. </view>
  11. <view class="u-demo-block">
  12. <text class="u-demo-block__title">带标题</text>
  13. <u-swiper
  14. :list="list2"
  15. keyName="image"
  16. showTitle
  17. :autoplay="false"
  18. circular
  19. ></u-swiper>
  20. </view>
  21. <view class="u-demo-block">
  22. <text class="u-demo-block__title">带指示器</text>
  23. <u-swiper
  24. :list="list3"
  25. indicator
  26. indicatorMode="line"
  27. circular
  28. ></u-swiper>
  29. </view>
  30. <view class="u-demo-block">
  31. <text class="u-demo-block__title">加载中</text>
  32. <u-swiper
  33. :list="list3"
  34. loading
  35. ></u-swiper>
  36. </view>
  37. <view class="u-demo-block">
  38. <text class="u-demo-block__title">嵌入视频</text>
  39. <u-swiper
  40. :list="list4"
  41. keyName="url"
  42. :autoplay="false"
  43. ></u-swiper>
  44. </view>
  45. <view class="u-demo-block">
  46. <text class="u-demo-block__title">自定义指示器</text>
  47. <u-swiper
  48. :list="list5"
  49. @change="e => current = e.current"
  50. :autoplay="false"
  51. >
  52. <view
  53. slot="indicator"
  54. class="indicator"
  55. >
  56. <view
  57. class="indicator__dot"
  58. v-for="(item, index) in list5"
  59. :key="index"
  60. :class="[index === current && 'indicator__dot--active']"
  61. >
  62. </view>
  63. </view>
  64. </u-swiper>
  65. <u-gap
  66. bgColor="transparent"
  67. height="15"
  68. ></u-gap>
  69. <u-swiper
  70. :list="list6"
  71. @change="e => currentNum = e.current"
  72. :autoplay="false"
  73. indicatorStyle="right: 20px"
  74. >
  75. <view
  76. slot="indicator"
  77. class="indicator-num"
  78. >
  79. <text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
  80. </view>
  81. </u-swiper>
  82. </view>
  83. <!-- #ifndef APP-NVUE || MP-TOUTIAO -->
  84. <view class="u-demo-block">
  85. <text class="u-demo-block__title">卡片式</text>
  86. <u-swiper
  87. :list="list3"
  88. previousMargin="30"
  89. nextMargin="30"
  90. circular
  91. :autoplay="false"
  92. radius="5"
  93. bgColor="#ffffff"
  94. ></u-swiper>
  95. </view>
  96. <!-- #endif -->
  97. </view>
  98. </template>
  99. <script>
  100. export default {
  101. data() {
  102. return {
  103. current: 0,
  104. currentNum: 0,
  105. list: [{
  106. // image: 'https://cdn.uviewui.com/uview/resources/video.mp4',
  107. image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  108. title: '昨夜星辰昨夜风,画楼西畔桂堂东',
  109. poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
  110. },
  111. {
  112. image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  113. title: '身无彩凤双飞翼,心有灵犀一点通'
  114. },
  115. {
  116. image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  117. title: '谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳'
  118. }
  119. ],
  120. list1: [
  121. 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  122. 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  123. 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  124. ],
  125. list2: [{
  126. image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  127. title: '昨夜星辰昨夜风,画楼西畔桂堂东',
  128. type: 'image',
  129. },
  130. {
  131. image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  132. title: '身无彩凤双飞翼,心有灵犀一点通'
  133. },
  134. {
  135. image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  136. title: '谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳'
  137. }
  138. ],
  139. list3: [
  140. 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  141. 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  142. 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  143. ],
  144. list4: [{
  145. url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
  146. title: '昨夜星辰昨夜风,画楼西畔桂堂东',
  147. poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  148. },
  149. {
  150. url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  151. title: '身无彩凤双飞翼,心有灵犀一点通'
  152. },
  153. {
  154. url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  155. title: '谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳'
  156. }
  157. ],
  158. list5: [
  159. 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  160. 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  161. 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  162. ],
  163. list6: [
  164. 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  165. 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  166. 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  167. ]
  168. }
  169. },
  170. methods: {
  171. change(e) {
  172. // console.log('change', e);
  173. },
  174. click(e) {
  175. console.log('click', e);
  176. }
  177. },
  178. }
  179. </script>
  180. <style lang="scss">
  181. .indicator {
  182. @include flex(row);
  183. justify-content: center;
  184. &__dot {
  185. height: 6px;
  186. width: 6px;
  187. border-radius: 100px;
  188. background-color: rgba(255, 255, 255, 0.35);
  189. margin: 0 5px;
  190. transition: background-color 0.3s;
  191. &--active {
  192. background-color: #ffffff;
  193. }
  194. }
  195. }
  196. .indicator-num {
  197. padding: 2px 0;
  198. background-color: rgba(0, 0, 0, 0.35);
  199. border-radius: 100px;
  200. width: 35px;
  201. @include flex;
  202. justify-content: center;
  203. &__text {
  204. color: #FFFFFF;
  205. font-size: 12px;
  206. }
  207. }
  208. </style>