Merge branch 'next' of https://github.com/jdf2e/nutui into next

src/packages/__VUE/swiper/demo.vue

@@ -54,6 +54,22 @@
         </template>
       </nut-swiper>
     </view>
+    <h2>{{ translate('btns') }}</h2>
+    <view class="demo-box">
+      <nut-swiper :init-page="page" :loop="true" ref="swiper">
+        <nut-swiper-item v-for="item in list" :key="item">
+          <img :src="item" alt="" />
+        </nut-swiper-item>
+      </nut-swiper>
+      <view class="nut-swiper-btns">
+        <span class="nut-swiper-btns__left" @click="handlePrev">
+          <nut-icon name="left"></nut-icon>
+        </span>
+        <span class="nut-swiper-btns__left" @click="handleNext">
+          <nut-icon name="right"></nut-icon>
+        </span>
+      </view>
+    </view>
     <h2>{{ translate('vertical') }}</h2>
     <view class="demo-box">
       <nut-swiper
@@ -74,7 +90,7 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, onMounted } from 'vue';
+import { reactive, toRefs, onMounted, ref, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('swiper');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -82,25 +98,28 @@ useTranslate({
   'zh-CN': {
     basic: '基本用法',
     asyc: '异步加载(3s)',
-    dynamicDel: '动态删除',
+    dynamicDel: '动态加载',
     size: '自定义大小',
     indicator: '自定义指示器',
     indicator1: '自定义指示器(异步3s)',
+    btns: '手动切换',
     vertical: '垂直方向'
   },
   'en-US': {
     basic: 'Basic Usage',
     asyc: 'Asynchronous loading(3s)',
-    dynamicDel: 'Dynamic deletion',
+    dynamicDel: 'Dynamic loading',
     size: 'Custom size',
     indicator: 'Custom indicator',
     indicator1: 'Custom indicator(Asynchronous loading(3s))',
+    btns: 'Manual switching',
     vertical: 'Vertical direction'
   }
 });
 export default createDemo({
   props: {},
   setup() {
+    const swiper = ref(null) as Ref;
     const state = reactive({
       page: 2,
       page2: 0,
@@ -128,6 +147,12 @@ export default createDemo({
     const change1 = (index: number) => {
       state.current1 = index + 1;
     };
+    const handlePrev = () => {
+      swiper.value.prev();
+    };
+    const handleNext = () => {
+      swiper.value.next();
+    };
     onMounted(() => {
       setTimeout(() => {
         state.list1 = state.list.slice();
@@ -136,8 +161,11 @@ export default createDemo({
     });
     return {
       ...toRefs(state),
+      swiper,
       change,
       change1,
+      handlePrev,
+      handleNext,
       translate
     };
   }
@@ -146,6 +174,7 @@ export default createDemo({
 
 <style lang="scss" scoped>
 .demo-box {
+  position: relative;
   .nut-swiper-item {
     height: 150px;
     img {
@@ -153,6 +182,17 @@ export default createDemo({
       height: 100%;
     }
   }
+  ::v-deep(.nut-swiper-pagination-vertical) {
+    i {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      &.active {
+        height: 18px;
+        border-radius: 5px;
+      }
+    }
+  }
   .page {
     position: absolute;
     bottom: 0;
@@ -165,5 +205,22 @@ export default createDemo({
     color: #fff;
     font-size: 14px;
   }
+  .nut-swiper-btns {
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 30px;
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+  }
 }
 </style>

src/packages/__VUE/swiper/doc.en-US.md

@@ -114,7 +114,7 @@ app.use(Swiper).use(SwiperItem);
 
 :::
 
-### Dynamic deletion
+### Dynamic loading
 
 Support dynamic addition / deletion of pictures
 
@@ -276,6 +276,88 @@ Support dynamic addition / deletion of pictures
 
 :::
 
+### Manual switching
+
+You can manually switch through `api` (`prev`, `next`)
+
+:::demo
+
+```html
+<template>
+  <view class="demo-box">
+    <nut-swiper :init-page="page" :loop="true" ref="swiper">
+      <nut-swiper-item v-for="item in list" :key="item">
+        <img :src="item" alt="" />
+      </nut-swiper-item>
+    </nut-swiper>
+    <view class="nut-swiper-btns">
+      <span class="nut-swiper-btns__left" @click="handlePrev">
+        <nut-icon name='left'></nut-icon>
+      </span>
+      <span class="nut-swiper-btns__left" @click="handleNext">
+        <nut-icon name='right'></nut-icon>
+      </span>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+  import { reactive, toRefs, ref, Ref } from 'vue';
+  export default {
+    setup() {
+      const swiper = ref(null) as Ref;
+      const state = reactive({
+        page: 2,
+        list: [
+          'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+          'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+          'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+        ],
+      });
+      const handlePrev = () => {
+        swiper.value.prev();
+      };
+      const handleNext = () => {
+        swiper.value.next();
+      };
+      
+      return { ...toRefs(state), swiper, handlePrev, handleNext };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .demo-box{
+    position: relative;
+  }
+  .nut-swiper-item {
+    line-height: 150px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .nut-swiper-btns{
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    span{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 30px;
+      background-color: rgba(0,0,0,.2);
+    }
+  }
+</style>
+```
+
+:::
+
 ### Vertical direction
 
 `direction` Custom rotation direction
@@ -317,6 +399,17 @@ Support dynamic addition / deletion of pictures
       width: 100%;
       height: 100%;
     }
+    ::v-deep(.nut-swiper-pagination-vertical) {
+      i{
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        &.active{
+          height: 18px;
+          border-radius: 5px;
+        }
+      }
+    }
   }
 </style>
 ```

src/packages/__VUE/swiper/doc.md

@@ -276,6 +276,88 @@ app.use(Swiper).use(SwiperItem);
 
 :::
 
+### 手动切换
+
+可通过 `API`(`prev`,`next`)进行手动切换
+
+:::demo
+
+```html
+<template>
+  <view class="demo-box">
+    <nut-swiper :init-page="page" :loop="true" ref="swiper">
+      <nut-swiper-item v-for="item in list" :key="item">
+        <img :src="item" alt="" />
+      </nut-swiper-item>
+    </nut-swiper>
+    <view class="nut-swiper-btns">
+      <span class="nut-swiper-btns__left" @click="handlePrev">
+        <nut-icon name='left'></nut-icon>
+      </span>
+      <span class="nut-swiper-btns__left" @click="handleNext">
+        <nut-icon name='right'></nut-icon>
+      </span>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+  import { reactive, toRefs, ref, Ref } from 'vue';
+  export default {
+    setup() {
+      const swiper = ref(null) as Ref;
+      const state = reactive({
+        page: 2,
+        list: [
+          'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+          'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+          'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+          'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+        ],
+      });
+      const handlePrev = () => {
+        swiper.value.prev();
+      };
+      const handleNext = () => {
+        swiper.value.next();
+      };
+      
+      return { ...toRefs(state), swiper, handlePrev, handleNext };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .demo-box{
+    position: relative;
+  }
+  .nut-swiper-item {
+    line-height: 150px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .nut-swiper-btns{
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    span{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 30px;
+      background-color: rgba(0,0,0,.2);
+    }
+  }
+</style>
+```
+
+:::
+
 ### 垂直方向
 
 `direction` 自定义轮播方向
@@ -317,6 +399,17 @@ app.use(Swiper).use(SwiperItem);
       width: 100%;
       height: 100%;
     }
+    ::v-deep(.nut-swiper-pagination-vertical) {
+      i{
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        &.active{
+          height: 18px;
+          border-radius: 5px;
+        }
+      }
+    }
   }
 </style>
 ```

src/packages/__VUE/swiper/index.taro.vue

@@ -29,6 +29,7 @@
         :style="{
           backgroundColor: activePagination === index ? paginationColor : '#ddd'
         }"
+        :class="{ active: activePagination === index }"
         v-for="(item, index) in state.children.length"
         :key="index"
       />

src/packages/__VUE/swiper/index.vue

@@ -28,6 +28,7 @@
         :style="{
           backgroundColor: activePagination === index ? paginationColor : '#ddd'
         }"
+        :class="{ active: activePagination === index }"
         v-for="(item, index) in state.children.length"
         :key="index"
       />

src/sites/mobile-taro/vue/src/exhibition/pages/swiper/index.vue

@@ -54,6 +54,22 @@
         </template>
       </nut-swiper>
     </view>
+    <h2>手动切换</h2>
+    <view class="demo-box">
+      <nut-swiper :init-page="page" :loop="true" ref="swiper">
+        <nut-swiper-item v-for="item in list" :key="item">
+          <img :src="item" alt="" />
+        </nut-swiper-item>
+      </nut-swiper>
+      <view class="nut-swiper-btns">
+        <span class="nut-swiper-btns__left" @click="handlePrev">
+          <nut-icon name="left"></nut-icon>
+        </span>
+        <span class="nut-swiper-btns__left" @click="handleNext">
+          <nut-icon name="right"></nut-icon>
+        </span>
+      </view>
+    </view>
     <h2>垂直方向</h2>
     <view class="demo-box">
       <nut-swiper
@@ -74,11 +90,12 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, onMounted } from 'vue';
+import { reactive, toRefs, onMounted, ref, Ref } from 'vue';
 
 export default {
   props: {},
   setup() {
+    const swiper = ref(null) as Ref;
     const state = reactive({
       page: 2,
       page2: 0,
@@ -106,6 +123,12 @@ export default {
     const change1 = (index: number) => {
       state.current1 = index + 1;
     };
+    const handlePrev = () => {
+      swiper.value.prev();
+    };
+    const handleNext = () => {
+      swiper.value.next();
+    };
     onMounted(() => {
       setTimeout(() => {
         state.list1 = state.list.slice();
@@ -114,8 +137,11 @@ export default {
     });
     return {
       ...toRefs(state),
+      swiper,
       change,
-      change1
+      change1,
+      handlePrev,
+      handleNext
     };
   }
 };
@@ -123,6 +149,7 @@ export default {
 
 <style lang="scss">
 .demo-box {
+  position: relative;
   .nut-swiper-item {
     height: 150px;
     img {
@@ -130,6 +157,17 @@ export default {
       height: 100%;
     }
   }
+  .nut-swiper-pagination-vertical {
+    i {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      &.active {
+        height: 18px;
+        border-radius: 5px;
+      }
+    }
+  }
   .page {
     position: absolute;
     bottom: 0;
@@ -142,5 +180,22 @@ export default {
     color: #fff;
     font-size: 14px;
   }
+  .nut-swiper-btns {
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 30px;
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+  }
 }
 </style>