@lynx-example/lynx-ui-swiper 0.0.1 → 0.0.2

package/EmptyDataBug/styles.css

@@ -0,0 +1,75 @@
+.container {
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+.main-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  color: #333;
+}
+
+.main-description {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 24px;
+  line-height: 1.5;
+}
+
+.section {
+  margin-bottom: 32px;
+  padding: 16px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  color: #333;
+}
+
+.description {
+  font-size: 12px;
+  color: #888;
+  margin-bottom: 16px;
+  line-height: 1.4;
+}
+
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 12px;
+  padding: 8px;
+  background-color: #e8e8e8;
+  border-radius: 4px;
+}
+
+.info text {
+  font-size: 12px;
+  color: #666;
+}
+
+.log-title {
+  font-weight: bold;
+  margin-top: 8px;
+  color: #333;
+}
+
+.log-item {
+  font-size: 11px;
+  color: #888;
+  padding-left: 8px;
+}

package/Indicator/index.tsx

@@ -0,0 +1,67 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { root } from '@lynx-js/react'
+
+import { Swiper, SwiperItem } from '@lynx-js/lynx-ui'
+
+import './styles.css'
+
+const colorsArr: string[] = ['red', 'green', 'yellow', 'purple']
+
+function SwiperEntry() {
+  return (
+    <Swiper
+      data={colorsArr}
+      itemWidth={375}
+      itemHeight={200}
+      loop={false}
+      duration={500}
+      initialIndex={0}
+      mode='normal'
+      bounceConfig={{
+        enable: true,
+        startBounceItemWidth: 100,
+        startBounceItem: (
+          <view>
+            <text>123</text>
+          </view>
+        ),
+      }}
+      onChange={i => {
+        console.log('change', i)
+      }}
+    >
+      {({ item, index, realIndex }) => (
+        <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+          <view
+            class='block-view'
+            style={{
+              width: '100%',
+              height: '100%',
+              backgroundColor: item,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <view
+              style={{
+                backgroundColor: 'white',
+                width: '4px',
+                height: '4px',
+              }}
+            >
+            </view>
+          </view>
+          <text class='image-text'>Number.{index}</text>
+        </SwiperItem>
+      )}
+    </Swiper>
+  )
+}
+
+root.render(<SwiperEntry />)
+
+export default SwiperEntry

package/Indicator/styles.css

@@ -0,0 +1,41 @@
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-text {
+  position: absolute;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.title-container {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.title-text {
+  font-size: 16px;
+}
+
+.button {
+  border: 1px solid;
+  border-radius: 4px;
+  width: 150px;
+  background-color: red;
+  margin: 4px 8px;
+  padding: 4px 8px;
+}
+
+.button-text {
+  color: white;
+}
+
+.operation {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}

package/Lazy/index.tsx

@@ -0,0 +1,83 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { root } from '@lynx-js/react'
+
+import { LazyComponent, Swiper, SwiperItem } from '@lynx-js/lynx-ui'
+
+import './styles.css'
+
+const colorsArr: string[] = [
+  'red',
+  'green',
+  'yellow',
+  'purple',
+  'lightblue',
+  'lightgreen',
+  'lightyellow',
+]
+
+function SwiperEntry() {
+  return (
+    <Swiper
+      data={colorsArr}
+      itemWidth={250}
+      itemHeight={200}
+      loop={false}
+      duration={500}
+      initialIndex={0}
+      mode='normal'
+      modeConfig={{
+        align: 'start',
+      }}
+      bounceConfig={{
+        enable: true,
+        startBounceItemWidth: 0,
+        endBounceItem: (
+          <view style='display: linear; linear-orientation: vertical; height: 100%; width: 30px; border: 1px solid #000;'>
+            <text style='color: #000'>Show More</text>
+          </view>
+        ),
+        onEndBounceItemBounce: ({ type }) => {
+          console.log('onBounce result', type)
+        },
+      }}
+    >
+      {({ item, index, realIndex }) => (
+        <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+          <LazyComponent
+            scene='scene'
+            pid={`pid_${realIndex}`}
+            estimatedStyle={{ width: '100%', height: '100%' }}
+          >
+            <view
+              class='block-view'
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: item,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <view
+                style={{
+                  backgroundColor: 'white',
+                  width: '4px',
+                  height: '4px',
+                }}
+              >
+              </view>
+            </view>
+          </LazyComponent>
+        </SwiperItem>
+      )}
+    </Swiper>
+  )
+}
+
+root.render(<SwiperEntry />)
+
+export default SwiperEntry

package/Lazy/styles.css

@@ -0,0 +1,41 @@
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-text {
+  position: absolute;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.title-container {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.title-text {
+  font-size: 16px;
+}
+
+.button {
+  border: 1px solid;
+  border-radius: 4px;
+  width: 150px;
+  background-color: red;
+  margin: 4px 8px;
+  padding: 4px 8px;
+}
+
+.button-text {
+  color: white;
+}
+
+.operation {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}

package/Loop/index.tsx

@@ -0,0 +1,77 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { root, useState } from '@lynx-js/react'
+
+import { Swiper, SwiperItem } from '@lynx-js/lynx-ui'
+
+import './styles.css'
+
+const colorsArr: string[] = ['red', 'green', 'yellow', 'purple']
+
+function SwiperEntry() {
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const SwiperItemGap = 8
+  const screenWidth = lynx.__globalProps.screenWidth
+    ?? SystemInfo.pixelWidth / SystemInfo.pixelRatio
+  const containWidth = (screenWidth || 375) - SwiperItemGap * 2
+  const itemWidth = ((screenWidth || 375) / 375) * 315
+
+  console.log(
+    'screenWidth, itemWidth, containWidth',
+    screenWidth,
+    itemWidth,
+    containWidth,
+  )
+  return (
+    <view>
+      <Swiper
+        data={colorsArr}
+        itemWidth={itemWidth + SwiperItemGap}
+        itemHeight={219.92727272727276}
+        containerWidth={containWidth}
+        loop={true}
+        duration={500}
+        initialIndex={0}
+        mode='normal'
+        autoPlay={true}
+        onChange={setCurrentIndex}
+        experimentalHorizontalSwipeOnly={true}
+      >
+        {({ item, index, realIndex }) => (
+          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+            <view
+              class='block-view'
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: item,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <view
+                style={{
+                  backgroundColor: 'white',
+                  width: '4px',
+                  height: '4px',
+                }}
+              >
+              </view>
+            </view>
+            <text class='image-text'>Number.{index}</text>
+          </SwiperItem>
+        )}
+      </Swiper>
+      <view>
+        <text>currentIndex: {currentIndex}</text>
+      </view>
+    </view>
+  )
+}
+
+root.render(<SwiperEntry />)
+
+export default SwiperEntry

package/Loop/styles.css

@@ -0,0 +1,41 @@
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-text {
+  position: absolute;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.title-container {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.title-text {
+  font-size: 16px;
+}
+
+.button {
+  border: 1px solid;
+  border-radius: 4px;
+  width: 150px;
+  background-color: red;
+  margin: 4px 8px;
+  padding: 4px 8px;
+}
+
+.button-text {
+  color: white;
+}
+
+.operation {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}

package/RTL/Button.tsx

@@ -0,0 +1,33 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import './styles.css'
+import { Button as ButtonInner } from '@lynx-js/lynx-ui'
+
+const ButtonStyle = {
+  border: '1px solid',
+  'border-radius': '4px',
+  width: '150px',
+  'background-color': 'red',
+  margin: '4px 8px',
+  padding: '4px 8px',
+}
+
+const ButtonTextStyle = {
+  color: 'white',
+}
+
+export function Button(props: {
+  onClick: () => void
+  text: string
+}) {
+  return (
+    <ButtonInner
+      style={ButtonStyle}
+      onClick={props.onClick}
+    >
+      <text style={ButtonTextStyle}>{props.text}</text>
+    </ButtonInner>
+  )
+}

package/RTL/index.tsx

@@ -0,0 +1,133 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { root, useRef, useState } from '@lynx-js/react'
+
+import { Swiper, SwiperItem } from '@lynx-js/lynx-ui'
+import type { SwiperRef } from '@lynx-js/lynx-ui'
+
+import './styles.css'
+
+import { Button } from './Button'
+
+const colorsArr: string[] = [
+  'red',
+  'green',
+  'yellow',
+  'purple',
+  'lightblue',
+  'lightgreen',
+  'lightyellow',
+]
+
+const itemWidths = [250, 350, 400]
+const alignArr: ['start', 'center', 'end'] = ['start', 'center', 'end']
+
+function SwiperEntry(): JSX.Element {
+  const [itemWidthsIndex, setItemWidthsIndex] = useState<number>(0)
+  const [alignIndex, setAlignIndex] = useState<number>(0)
+  const [currentIndex, setCurrentIndex] = useState<number>(0)
+  const swiperRef = useRef<SwiperRef>(null)
+
+  return (
+    <view id='container'>
+      <Swiper
+        ref={swiperRef}
+        data={colorsArr}
+        itemWidth={itemWidths[itemWidthsIndex] ?? 0}
+        itemHeight={200}
+        duration={500}
+        initialIndex={0}
+        onChange={setCurrentIndex}
+        mode='normal'
+        modeConfig={{
+          align: alignArr[alignIndex] ?? 'start',
+          spaceBetween: 8,
+        }}
+        RTL={true}
+        bounceConfig={{
+          enable: true,
+          startBounceItemWidth: 100,
+          endBounceItemWidth: 100,
+          startBounceItem: (
+            <view style='display: linear; linear-orientation: vertical; height: 100%; width: 30px; border: 1px solid #000;'>
+              <text style='color: #000'>Start Show More</text>
+            </view>
+          ),
+          endBounceItem: (
+            <view style='display: linear; linear-orientation: vertical; height: 100%; width: 30px; border: 1px solid #000;'>
+              <text style='color: #000'>Show More</text>
+            </view>
+          ),
+          onEndBounceItemBounce: ({ type }) => {
+            console.log('onBounce result', type)
+          },
+        }}
+      >
+        {({ item, index, realIndex }) => (
+          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+            <view
+              class='block-view'
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: item,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <view
+                style={{
+                  backgroundColor: 'white',
+                  width: '4px',
+                  height: '4px',
+                }}
+              >
+              </view>
+            </view>
+            <text class='image-text'>Number.{index}</text>
+          </SwiperItem>
+        )}
+      </Swiper>
+      <view class='operation'>
+        <view class='block'>
+          <text>Current Index: {currentIndex}</text>
+        </view>
+        <Button
+          onClick={() => {
+            swiperRef.current?.swipePrev()
+          }}
+          text='SwipePrev'
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            swiperRef.current?.swipeNext()
+          }}
+          text='SwipeNext'
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            setItemWidthsIndex(prev => (prev + 1) % itemWidths.length)
+          }}
+          text={`itemWidth: ${itemWidths[itemWidthsIndex]}`}
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            setAlignIndex(prev => (prev + 1) % itemWidths.length)
+          }}
+          text={`alignType: ${alignArr[alignIndex]}`}
+        >
+        </Button>
+      </view>
+    </view>
+  )
+}
+
+root.render(<SwiperEntry />)
+
+export default SwiperEntry

package/RTL/styles.css

@@ -0,0 +1,41 @@
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-text {
+  position: absolute;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.title-container {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.title-text {
+  font-size: 16px;
+}
+
+.button {
+  border: 1px solid;
+  border-radius: 4px;
+  width: 150px;
+  background-color: red;
+  margin: 4px 8px;
+  padding: 4px 8px;
+}
+
+.button-text {
+  color: white;
+}
+
+.operation {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}