feat: ✨ swiper组件增加current属性控制轮播项功能

✅ Closes: #211

Author: jasper-ops

docs/component/swiper.md

@@ -184,12 +184,33 @@ function onChange(e) {
 }
 ```
 
+## 属性控制切换
+```html
+<wd-swiper :loop="isLoop" :autoplay="false" :list="swiperList" v-model:current="current" />
+<wd-gap />
+<wd-cell-group>
+  <wd-cell title="loop">
+    <wd-switch v-model="isLoop" size="24px" />
+  </wd-cell>
+  <wd-cell title="current" :value="current.toString()" />
+</wd-cell-group>
+<view style="display: flex; justify-content: space-between">
+  <wd-button @click="current--">prev</wd-button>
+  <wd-button type="success" @click="current++">next</wd-button>
+</view>
+```
+
+```javascript
+const current = ref<number>(0)
+const isLoop = ref(false)
+```
+
 ## Attributes
 
 | 参数                 | 说明                                                   | 类型                      | 可选值      | 默认值     | 最低版本 |
 | -------------------- | ------------------------------------------------------ | ------------------------- | ---------- | ---------- | -------- |
 | autoplay             | 是否自动播放                                           | `boolean`                   | -          | true       | 0.1.22   |
-| current              | 当前轮播在哪一项（下标）                               | `number`                    | -          | 0          | 0.1.22   |
+| v-model:current      | 控制当前轮播在哪一项（下标）                               | `number`                    | -          | 0          | 0.1.22   |
 | direction            | 轮播滑动方向                                           | `DirectionType`             | `horizontal, vertical`     | horizontal | 0.1.22   |
 | displayMultipleItems | 同时显示的滑块数量                                     | `number`                    | -          | 1          | 0.1.22   |
 | duration             | 滑动动画时长                                           | `number`                    | -          | 300        | 0.1.22   |
@@ -226,15 +247,15 @@ function onChange(e) {
 ### SwiperIndicatorProps
 
 | 参数                | 说明                       | 类型                   | 可选值                                                                   | 默认值     | 最低版本 |
-| ------------------- | -------------------------- | ---------------------- | ------------------------------------------------------------------------ | ---------- | -------- | 
+| ------------------- | -------------------------- | ---------------------- | ------------------------------------------------------------------------ | ---------- | -------- |
 | current             | 当前轮播在哪一项（下标）   | Number                 | -                                                                        | 0          | 0.1.22   |
 | direction           | 轮播滑动方向               | DirectionType          | `horizontal, vertical`                                                   | horizontal | 0.1.22   |
 | min-show-num        | 小于这个数字不会显示导航器 | Number                 | -                                                                        | 2          | 0.1.22   |
 | pagination-position | 页码信息展示位置           | IndicatorPositionType | `left, top-left, top, top-right, bottom-left, bottom, bottom-right, right` | bottom     | 0.1.22   |
 | show-controls       | 是否显示控制按钮           | Boolean                | -                                                                        | false      | 0.1.22   |
 | total               | 总共的项数                 | Number                 | -                                                                        | 0          | 0.1.22   |
 | type                | 导航器类型                 | SwiperIndicatorType   | `dots, dots-bar, fraction `                                        | dots       | 0.1.22   |
-| autoplay            | 是否自动播放               | boolean                | -                                                                        | true       | 0.1.22   | 
+| autoplay            | 是否自动播放               | boolean                | -                                                                        | true       | 0.1.22   |
 
 ## Events
 

src/pages/swiper/Index.vue

@@ -87,6 +87,22 @@
         </template>
       </wd-swiper>
     </demo-block>
+
+    <demo-block title="属性控制切换">
+      <wd-swiper :loop="isLoop" :autoplay="false" :list="swiperList" v-model:current="current" />
+      <wd-gap />
+      <wd-cell-group>
+        <wd-cell title="loop">
+          <wd-switch v-model="isLoop" size="24px" />
+        </wd-cell>
+        <wd-cell title="current" :value="current.toString()" />
+      </wd-cell-group>
+      <view style="display: flex; justify-content: space-between">
+        <wd-button @click="current--">prev</wd-button>
+
+        <wd-button type="success" @click="current++">next</wd-button>
+      </view>
+    </demo-block>
   </page-wraper>
 </template>
 <script lang="ts" setup>
@@ -99,6 +115,10 @@ const swiperList = ref([
   'https://img.yzcdn.cn/vant/cat.jpeg',
   'https://unpkg.com/wot-design-uni-assets/meng.jpg'
 ])
+
+const current = ref<number>(0)
+const isLoop = ref(false)
+
 function handleClick(e: any) {
   console.log(e)
 }

src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue

@@ -46,17 +46,29 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeMount, ref } from 'vue'
+import { computed, watch, ref } from 'vue'
 import { addUnit, isObj } from '../common/util'
 import { swiperProps, type SwiperList } from './types'
 import type { SwiperNavProps } from '../wd-swiper-nav/types'
 
+const emit = defineEmits(['click', 'change', 'animationfinish', 'update:current'])
 const props = defineProps(swiperProps)
 const navCurrent = ref<number>(0) // 当前滑块
 
-onBeforeMount(() => {
-  navCurrent.value = props.current
-})
+watch(
+  () => props.current,
+  (val) => {
+    if (val < 0) {
+      props.loop ? goToEnd() : goToStart()
+    } else if (val >= props.list.length) {
+      props.loop ? goToStart() : goToEnd()
+    } else {
+      go(val)
+    }
+    emit('update:current', navCurrent.value)
+  },
+  { immediate: true }
+)
 
 const swiperIndicator = computed(() => {
   const { list, direction, indicatorPosition, indicator } = props
@@ -74,7 +86,17 @@ const swiperIndicator = computed(() => {
   return swiperIndicator
 })
 
-const emit = defineEmits(['click', 'change', 'animationfinish'])
+function go(index: number) {
+  navCurrent.value = index
+}
+
+function goToStart() {
+  navCurrent.value = 0
+}
+
+function goToEnd() {
+  navCurrent.value = props.list.length - 1
+}
 
 /**
  * 是否为当前滑块的前一个滑块