init

uni_modules/nutui-uni/components/swiperitem/index.scss

@@ -0,0 +1,3 @@
+.nut-swiper-item {
+  height: 100%;
+}

uni_modules/nutui-uni/components/swiperitem/index.ts

@@ -0,0 +1 @@
+export type * from './swiperitem'

uni_modules/nutui-uni/components/swiperitem/swiperitem.ts

@@ -0,0 +1,12 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps } from '../_utils'
+
+export const swiperItemProps = {
+  ...commonProps,
+}
+
+export type SwiperItemProps = ExtractPropTypes<typeof swiperItemProps>
+
+export interface SwiperItemInst {
+  setOffset: (offset: number) => void
+}

uni_modules/nutui-uni/components/swiperitem/swiperitem.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { ComputedRef, CSSProperties } from 'vue'
+import { computed, defineComponent, reactive } from 'vue'
+import { PREFIX } from '../_constants'
+import { useInject } from '../_hooks'
+import { getMainClass, getMainStyle } from '../_utils'
+import type { SwiperProps } from '../swiper/swiper'
+import { SWIPER_KEY } from '../swiper/swiper'
+import { swiperItemProps } from './swiperitem'
+
+const props = defineProps(swiperItemProps)
+const { parent } = useInject<{ size: ComputedRef<number>, props: Required<SwiperProps> }>(SWIPER_KEY)
+
+const state = reactive({
+  offset: 0,
+})
+
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+
+const style = computed<string>(() => {
+  const style = {} as CSSProperties
+  const direction = parent?.props.direction
+  if (parent?.size.value)
+    style[direction === 'horizontal' ? 'width' : 'height'] = `${parent?.size.value}px`
+
+  if (state.offset)
+    style.transform = `translate${direction === 'horizontal' ? 'X' : 'Y'}(${state.offset}px)`
+
+  return getMainStyle(props, style)
+})
+
+function setOffset(offset: number) {
+  state.offset = offset
+}
+
+defineExpose({ setOffset })
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-swiper-item`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="style">
+    <slot />
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>