feat: taro swiper

package.json

@@ -97,7 +97,8 @@
     "typescript": "^4.1.5",
     "vite": "^2.3.4",
     "vite-plugin-md": "^0.6.7",
-    "vue-jest": "^5.0.0-alpha.7"
+    "vue-jest": "^5.0.0-alpha.7",
+    "@tarojs/taro": "3.3.0-alpha.6"
   },
   "eslintConfig": {
     "root": true,

src/config.json

@@ -275,6 +275,7 @@
         },
         {
           "name": "Swiper",
+          "taro": true,
           "sort": 6,
           "cName": "轮播",
           "type": "component",

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

@@ -0,0 +1,43 @@
+<template>
+  <swiper
+    class="test-h"
+    indicator-color="#999"
+    indicator-active-color="#333"
+    vertical
+    circular
+    indicator-dots
+    autoplay
+  >
+    <swiper-item>
+      <view class="demo-text-1">1</view>
+    </swiper-item>
+    <swiper-item>
+      <view class="demo-text-2">2</view>
+    </swiper-item>
+    <swiper-item>
+      <view class="demo-text-3">3</view>
+    </swiper-item>
+  </swiper>
+</template>
+
+<script lang="ts">
+import Taro from '@tarojs/taro';
+import { createComponent } from '@/packages/utils/create';
+import { useTouch } from './use-touch';
+import { useExpose } from '@/packages/utils/useExpose/index';
+const { create, componentName } = createComponent('swiper');
+// import swiperItem from '@/packages/__VUE/swiperitem/index.vue';
+export default create({
+  // children: [swiperItem],
+  props: {},
+  emits: [],
+
+  setup(props, { emit, slots }) {
+    return {};
+  }
+});
+</script>
+
+<style scoped lang="scss">
+@import 'index.scss';
+</style>

src/sites/mobile-taro/vue/src/app.config.ts

@@ -1,5 +1,6 @@
 export default {
   pages: [
+    'pages/swiper/index',
     'pages/actionsheet/index',
     'pages/popup/index',
     'pages/icon/index',

src/sites/mobile-taro/vue/src/pages/swiper/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'Swiper'
+};

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

@@ -0,0 +1,104 @@
+<template>
+  <div class="demo">
+    <h2>基本用法</h2>
+    <view class="demo-box">
+      <nut-swiper
+        :init-page="page"
+        :pagination-visible="true"
+        pagination-color="#426543"
+      >
+        <nut-swiper-item v-for="item in list" :key="item">
+          <img :src="item" alt="" />
+        </nut-swiper-item>
+      </nut-swiper>
+    </view>
+    <h2>自定义大小</h2>
+    <view class="demo-box">
+      <nut-swiper :init-page="page2" :loop="false" width="300">
+        <nut-swiper-item v-for="item in list" :key="item">
+          <img :src="item" alt="" />
+        </nut-swiper-item>
+      </nut-swiper>
+    </view>
+    <h2>自定义指示器</h2>
+    <view class="demo-box">
+      <nut-swiper :init-page="page3" :loop="true" @change="change">
+        <nut-swiper-item v-for="item in list" :key="item">
+          <img :src="item" alt="" />
+        </nut-swiper-item>
+        <template v-slot:page>
+          <div class="page"> {{ current }}/4 </div>
+        </template>
+      </nut-swiper>
+    </view>
+    <h2>垂直方向</h2>
+    <view class="demo-box">
+      <nut-swiper
+        :init-page="page4"
+        :loop="true"
+        auto-play="3000"
+        direction="vertical"
+        height="150"
+        :pagination-visible="true"
+        style="height: 150px"
+      >
+        <nut-swiper-item v-for="item in list" :key="item">
+          <img :src="item" alt="" />
+        </nut-swiper-item>
+      </nut-swiper>
+    </view>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+export default {
+  props: {},
+  setup() {
+    const state = reactive({
+      page: 2,
+      page2: 0,
+      page3: 0,
+      page4: 0,
+      current: 1,
+      list: [
+        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/128047/5/6706/178631/5f068cefE53bff564/4dd870d8932daecf.jpg',
+        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/159602/22/7999/126515/6035f371E6f95bfee/559cb1ee48c962c9.jpg',
+        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/166846/13/7534/136440/60338b5cEd491d8b3/9e5527429136ab86.jpg',
+        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/145433/27/14059/141680/5facf066Ec402354c/530d5a316aed55fc.jpg'
+      ]
+    });
+    const change = (index: number) => {
+      state.current = index + 1;
+    };
+    return {
+      ...toRefs(state),
+      change
+    };
+  }
+};
+</script>
+
+<style lang="scss">
+.demo-box {
+  .nut-swiper-item {
+    line-height: 150px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .page {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 46px;
+    height: 22px;
+    background: rgba(0, 0, 0, 0.33);
+    border-radius: 22px;
+    text-align: center;
+    color: #fff;
+    font-size: 14px;
+  }
+}
+</style>