diff --git a/README.md b/README.md index 4d19368..48ea585 100644 --- a/README.md +++ b/README.md @@ -23,3 +23,9 @@ password: 4b28ffea feastfu@qq.com Fuyan831111~ https://cloud.tencent.com/login?s_url=https%3A%2F%2Fconsole.cloud.tencent.com%2Fdeveloper + + + +接口: https://i8ar7va0x1.feishu.cn/docx/R6Nod8bcPohRh2xOYbAceof4nxd +https://www.kdocs.cn/l/cdrvvpi9CKNe?f=301 + diff --git a/pages/fittingRoom/components/s-select-mote.vue b/pages/fittingRoom/components/s-select-mote.vue index 2f2b5dd..0bb5cb5 100644 --- a/pages/fittingRoom/components/s-select-mote.vue +++ b/pages/fittingRoom/components/s-select-mote.vue @@ -31,7 +31,7 @@ const sizeType = ['original']; const imageStyle = { width: 200, - height: 200, + height: 50, }; const fittingRoom = sheep.$store('fittingRoom'); @@ -60,6 +60,7 @@ overflow: hidden; height: 76rpx; transition: height 0.3s ease-in-out; + z-index: 200; } .unfold { height: 700rpx; @@ -105,6 +106,7 @@ left: 0; width: 100%; height: 100%; + opacity: 0; } .item-image { diff --git a/pages/fittingRoom/index.vue b/pages/fittingRoom/index.vue index 08f80ab..1b1f695 100644 --- a/pages/fittingRoom/index.vue +++ b/pages/fittingRoom/index.vue @@ -1,29 +1,31 @@ @@ -36,26 +38,73 @@ import SGridClothes from './components/s-grid-clothes.vue'; // 隐藏原生tabBar const fittingRoom = sheep.$store('fittingRoom'); + sheep.$helper.toast('请选择是否同意协议'); // 隐藏原生tabBar uni.hideTabBar({ fail: () => {}, }); + function handleItemClick(index, item) { + console.log(index, item, '12'); + } + + const carouselList = [ + { + image: 'https://picsum.photos/600/300?random=1', + }, + { + image: 'https://picsum.photos/600/300?random=2', + }, + { + image: 'https://picsum.photos/600/300?random=3', + }, + { + image: 'https://picsum.photos/600/300?random=4', + }, + { + image: 'https://picsum.photos/600/300?random=5', + }, + ]; + const state = reactive({ info: [ { - content: '内容 A', + image: 'https://picsum.photos/600/300?random=1', }, { - content: '内容 B', + image: 'https://picsum.photos/600/300?random=2', }, { - content: '内容 C', - }, + image: 'https://picsum.photos/600/300?random=3', + } ], current: 0, }); + function handleChange(index, oldIndex) { + // state.current = index; + console.log('---- change ----', index, oldIndex) + }; + + function dian() { + state.info = [ + { + image: 'https://picsum.photos/600/300?random=1', + }, + { + image: 'https://picsum.photos/600/300?random=2', + }, + { + image: 'https://picsum.photos/600/300?random=3', + }, + { + image: 'https://picsum.photos/600/300?random=4', + }, + { + image: 'https://picsum.photos/600/300?random=5', + }, + ] + } const swiperChange = (e) => { state.current = e.detail.current; }; @@ -102,6 +151,7 @@ diff --git a/uni_modules/hbxw-stack-carousel/example.jpg b/uni_modules/hbxw-stack-carousel/example.jpg new file mode 100644 index 0000000..f7218c5 Binary files /dev/null and b/uni_modules/hbxw-stack-carousel/example.jpg differ diff --git a/uni_modules/hbxw-stack-carousel/package.json b/uni_modules/hbxw-stack-carousel/package.json new file mode 100644 index 0000000..df941ab --- /dev/null +++ b/uni_modules/hbxw-stack-carousel/package.json @@ -0,0 +1,86 @@ +{ + "id": "hbxw-stack-carousel", + "displayName": "堆叠轮播图", + "version": "1.0.4", + "description": "一个支持3D堆叠效果的轮播图组件,具有自动播放、无缝循环、触摸滑动等功能,适用于各种图片展示场景", + "keywords": [ + "3d轮播图", + "3D堆叠轮播图", + "轮播图" +], + "repository": "", + "engines": { + "HBuilderX": "^3.1.0" + }, + "dcloudext": { + "type": "component-vue", + "sale": { + "regular": { + "price": "0.00" + }, + "sourcecode": { + "price": "0.00" + } + }, + "contact": { + "qq": "" + }, + "declaration": { + "ads": "无", + "data": "插件不采集任何数据", + "permissions": "无" + }, + "npmurl": "" + }, + "uni_modules": { + "dependencies": [], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y", + "alipay": "y" + }, + "client": { + "Vue": { + "vue2": "y", + "vue3": "y" + }, + "App": { + "app-vue": "u", + "app-nvue": "u", + "app-uvue": "u", + "app-harmony": "u" + }, + "H5-mobile": { + "Safari": "u", + "Android Browser": "u", + "微信浏览器(Android)": "u", + "QQ浏览器(Android)": "u" + }, + "H5-pc": { + "Chrome": "u", + "IE": "u", + "Edge": "u", + "Firefox": "u", + "Safari": "u" + }, + "小程序": { + "微信": "y", + "阿里": "u", + "百度": "u", + "字节跳动": "u", + "QQ": "u", + "钉钉": "u", + "快手": "u", + "飞书": "u", + "京东": "u" + }, + "快应用": { + "华为": "u", + "联盟": "u" + } + } + } + } +} \ No newline at end of file diff --git a/uni_modules/hbxw-stack-carousel/readme.md b/uni_modules/hbxw-stack-carousel/readme.md new file mode 100644 index 0000000..17ee798 --- /dev/null +++ b/uni_modules/hbxw-stack-carousel/readme.md @@ -0,0 +1,222 @@ +# hbxw-stack-carousel 3D堆叠轮播图 + +## 介绍 + +一个支持3D堆叠效果的轮播图组件,具有自动播放、无缝循环、触摸滑动等功能,适用于各种图片展示场景。 + +## 特性 + +- 3D堆叠效果:轮播图以3D堆叠的方式展示,提供独特的视觉体验 +- 自动播放:支持自动轮播功能,可自定义播放间隔时间 +- 无缝循环:支持首尾衔接的无缝循环播放 +- 手势滑动:支持左右滑动切换图片 +- 自定义指示器:支持圆点和线条两种指示器样式 +- 自定义尺寸:支持自定义组件的宽度和高度 + +## 使用示例 + +推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。 + +```vue + + + + + +``` + +## API + +### Props 属性说明 + +| 属性名 | 类型 | 默认值 | 说明 | +| --- | --- | --- | --- | +| list | Array | [] | 轮播图数据列表,每个元素必须包含image属性 | +| width | String/Number | '750rpx' | 组件宽度,支持数字(单位rpx)或字符串 | +| height | String/Number | '400rpx' | 组件高度,支持数字(单位rpx)或字符串 | +| autoplay | Boolean | true | 是否自动播放 | +| interval | Number | 3000 | 自动播放间隔时间(毫秒) | +| loop | Boolean | false | 是否启用无缝循环 | +| showIndicator | Boolean | true | 是否显示指示器 | +| indicatorStyle | String | 'dot' | 指示器样式,支持dot(圆点)和line(线条) | + +### Events 事件说明 + +| 事件名 | 说明 | 回调参数 | +| --- | --- | --- | +| change | 轮播图切换时触发 | (index: number, oldIndex: number) index: 当前索引,oldIndex: 上一个索引 | +| click | 点击轮播图时触发 | (index: number, item: object) index: 当前点击的轮播图索引,item: 当前点击的轮播图数据 | + +## 注意事项 + +1. list数组中的每个对象必须包含image属性 +2. 组件宽高支持数字(自动添加rpx单位)或带单位的字符串格式 +3. 启用无缝循环时,建议list数组至少包含2个元素 +4. 使用line样式指示器时,建议搭配较大的组件宽度,以获得更好的视觉效果 + +## 插槽使用说明 + +### 默认插槽 + +用于自定义轮播图内容,接收以下作用域参数: + +- `item`: 当前轮播项数据 +- `index`: 当前项索引 + +示例: + +```vue + + + +``` + +### 指示器插槽 + +用于自定义指示器样式,接收以下作用域参数: + +- `current-index`: 当前激活的轮播索引 +- `total`: 轮播项总数 +- `handle-click`: 点击切换轮播的方法 + +示例: + +```vue + + + +```