feat: swiper taro

bobocome · Jun 14, 2021 · 9c1e964 · 9c1e964
1 parent fce1d69
commit 9c1e964
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 68 deletions.
diff --git a/src/packages/__VUE/swiper/index.taro.vue b/src/packages/__VUE/swiper/index.taro.vue
@@ -1,30 +1,22 @@
 <template>
-  <swiper
-    class="nut-swiper"
-    indicator-color="#999"
-    indicator-active-color="#333"
-    vertical
-    circular
-    indicator-dots
-    autoplay
-  >
+  <swiper v-bind="attrs">
+    <slot></slot>
   </swiper>
 </template>
 
 <script lang="ts">
-import Taro from '@tarojs/taro';
 import { createComponent } from '@/packages/utils/create';
 const { create, componentName } = createComponent('swiper');
-// import swiperItem from '@/packages/__VUE/swiperitem/index.vue';
-// console.log(Taro)
-// console.log(Taro.createSelectorQuery)
+import swiperItem from '@/packages/__VUE/swiperitem/index.taro.vue';
 export default create({
-  // children: [swiperItem],
+  inheritAttrs: false,
+  children: [swiperItem],
   props: {},
   emits: [],
 
-  setup(props, { emit, slots }) {
-    return {};
+  setup(props, context) {
+    const attrs = context.attrs;
+    return { attrs };
   }
 });
 </script>

diff --git a/src/packages/__VUE/swiperitem/index.taro.vue b/src/packages/__VUE/swiperitem/index.taro.vue
@@ -0,0 +1,30 @@
+<template>
+  <swiper-item :class="classes">
+    <slot></slot>
+  </swiper-item>
+</template>
+
+<script lang="ts">
+import { computed, reactive, inject, getCurrentInstance, watch } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+const { create, componentName } = createComponent('swiper-item');
+export default create({
+  props: {},
+  setup(props, { slots }) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+
+    return {
+      classes
+    };
+  }
+});
+</script>
+
+<style scoped lang="scss">
+@import 'index.scss';
+</style>
diff --git a/src/sites/mobile-taro/vue/src/pages/swiper/index.vue b/src/sites/mobile-taro/vue/src/pages/swiper/index.vue
@@ -1,96 +1,74 @@
 <template>
   <div class="demo">
     <h2>基本用法</h2>
-    <view class="demo-box1" id="test">
-      <nut-swiper>
-        1111
-        <!-- <nut-swiper-item v-for="item in list" :key="item">
+    <view class="demo-box">
+      <nut-swiper autoplay="true" circular="true">
+        <nut-swiper-item v-for="item in list" :key="item">
           <img :src="item" alt="" />
-        </nut-swiper-item> -->
+        </nut-swiper-item>
       </nut-swiper>
     </view>
-    <!-- <h2>自定义大小</h2>
+    <h2>改变起始位置</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page2" :loop="false" width="300">
+      <nut-swiper current="1">
         <nut-swiper-item v-for="item in list" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
       </nut-swiper>
-    </view> -->
-    <!-- <h2>自定义指示器</h2>
+    </view>
+    <h2>自定义指示器</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page3" :loop="true" @change="change">
+      <nut-swiper
+        autoplay="true"
+        circular="true"
+        indicator-dots="true"
+        indicator-color="pink"
+        indicator-active-color="red"
+      >
         <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>
+    <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"
+        vertical="true"
+        autoplay="true"
+        circular="true"
+        indicator-dots="true"
+        indicator-color="pink"
+        indicator-active-color="red"
       >
         <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> -->
+    </view>
   </div>
 </template>
 
 <script lang="ts">
 import { reactive, toRefs, onMounted } from 'vue';
-import Taro, { nextTick, eventCenter, getCurrentInstance } from '@tarojs/taro';
 
 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'
+        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/166846/13/7534/136440/60338b5cEd491d8b3/9e5527429136ab86.jpg'
       ]
     });
-    const change = (index: number) => {
-      state.current = index + 1;
-    };
-    onMounted(() => {
-      eventCenter.once(
-        (getCurrentInstance() as any).router.onReady,
-        async () => {
-          // const query = Taro.createSelectorQuery()
-          const query = document.querySelector('#test') as any;
-          const res = await query.getBoundingClientRect();
-          console.log(res);
-          // console.log(document.querySelector('#test'))
-          // console.log(query)
-          // query.select('#test').boundingClientRect()
-          // query.exec(res => {
-          //   console.log(res)
-          // })
-          // console.log('onReady')
-        }
-      );
-    });
     return {
-      ...toRefs(state),
-      change
+      ...toRefs(state)
     };
   }
 };
@@ -99,7 +77,6 @@ export default {
 <style lang="scss">
 .demo-box {
   .nut-swiper-item {
-    line-height: 150px;
     img {
       width: 100%;
       height: 100%;