project-jiaxinglcpy
/
jxlcpy_base_daoshi_vue_ts
forked from common/base_daoshi_vue_ts
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改滑动问题
continuous-integration/drone/push Build is passing
Details

Reviewed-on: https://git.1000my.com/project-jiaxinglcpy/jxlcpy_base_daoshi_vue_ts/pulls/5
test
张耀 3 years ago
parent
4716a20aed f69c7f0a2a
commit
2ccd6f6818
7 changed files with 75 additions and 144 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      CHANGELOG.md
  2. 37
      package-lock.json
  3. 4
      package.json
  4. 107
      public/static/offline/JSON/getActivityList1.json
  5. 17
      src/components/Carousel/Carousel.vue
  6. 2
      src/types/home.d.ts
  7. 37
      src/views/Activity/Activity.vue

15
CHANGELOG.md
View File

@ -2,6 +2,21 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
## [1.0.0-B.4](https://git.1000my.com/project-jiaxinglcpy/jxlcpy_base_daoshi_vue_ts/compare/v1.0.0-B.3...v1.0.0-B.4) (2023-06-14)
### Features
* 🚀 修改滑动 ([a795fa1](https://git.1000my.com/project-jiaxinglcpy/jxlcpy_base_daoshi_vue_ts/commit/a795fa12527df4305cef3302a1109da335615b75))
## [1.0.0-B.3](https://git.1000my.com/project-jiaxinglcpy/jxlcpy_base_daoshi_vue_ts/compare/v1.0.0-B.2...v1.0.0-B.3) (2023-06-14)
### Bug Fixes
* 🧩 修改滑动问题 ([8d4361a](https://git.1000my.com/project-jiaxinglcpy/jxlcpy_base_daoshi_vue_ts/commit/8d4361a2f5b61c4add4f37b9fc8bb5085670da47))
* 修改轮播 ([aaa2198](https://git.1000my.com/project-jiaxinglcpy/jxlcpy_base_daoshi_vue_ts/commit/aaa21989d7b0f4679f1a20b93716191f218c5d07))
## [1.0.0-B.2](https://git.1000my.com/project-jiaxinglcpy/jxlcpy_base_daoshi_vue_ts/compare/v1.0.0-B.1...v1.0.0-B.2) (2023-06-14)

37
package-lock.json
View File

@ -1,12 +1,12 @@
{
"name": "vue_cli_ts",
"version": "1.0.0-B.2",
"version": "1.0.0-B.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "vue_cli_ts",
"version": "1.0.0-B.2",
"version": "1.0.0-B.4",
"dependencies": {
"@better-scroll/core": "^2.5.0",
"@better-scroll/observe-image": "^2.5.0",
@ -18,7 +18,7 @@
"lottie-web": "^5.10.2",
"pinia": "^2.0.30",
"qrcode": "^1.5.1",
"swiper": "^9.0.5",
"swiper": "^8.4.5",
"vue": "^3.2.13",
"vue-i18n": "^9.2.2",
"vue-router": "^4.0.3",
@ -7840,6 +7840,14 @@
"entities": "^2.0.0"
}
},
"node_modules/dom7": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.6.tgz",
"integrity": "sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==",
"dependencies": {
"ssr-window": "^4.0.0"
}
},
"node_modules/domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
@ -16952,9 +16960,9 @@
}
},
"node_modules/swiper": {
"version": "9.0.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-9.0.5.tgz",
"integrity": "sha512-UiLQ5fvn8L3ZZpaPa+9oiwKwhVGQt5TVc0UuXxFKHyTQe8g2E3vbPMiMfIGb6NhNGj5ntsSDyyNgg4qVmWlJkQ==",
"version": "8.4.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.5.tgz",
"integrity": "sha512-zveyEFBBv4q1sVkbJHnuH4xCtarKieavJ4SxP0QEHvdpPLJRuD7j/Xg38IVVLbp7Db6qrPsLUePvxohYx39Agw==",
"funding": [
{
"type": "patreon",
@ -16965,7 +16973,9 @@
"url": "http://opencollective.com/swiper"
}
],
"hasInstallScript": true,
"dependencies": {
"dom7": "^4.0.4",
"ssr-window": "^4.0.2"
},
"engines": {
@ -24884,6 +24894,14 @@
"entities": "^2.0.0"
}
},
"dom7": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.6.tgz",
"integrity": "sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==",
"requires": {
"ssr-window": "^4.0.0"
}
},
"domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
@ -31910,10 +31928,11 @@
}
},
"swiper": {
"version": "9.0.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-9.0.5.tgz",
"integrity": "sha512-UiLQ5fvn8L3ZZpaPa+9oiwKwhVGQt5TVc0UuXxFKHyTQe8g2E3vbPMiMfIGb6NhNGj5ntsSDyyNgg4qVmWlJkQ==",
"version": "8.4.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.5.tgz",
"integrity": "sha512-zveyEFBBv4q1sVkbJHnuH4xCtarKieavJ4SxP0QEHvdpPLJRuD7j/Xg38IVVLbp7Db6qrPsLUePvxohYx39Agw==",
"requires": {
"dom7": "^4.0.4",
"ssr-window": "^4.0.2"
}
},

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "vue_cli_ts",
"version": "1.0.0-B.2",
"version": "1.0.0-B.4",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
@ -27,7 +27,7 @@
"lottie-web": "^5.10.2",
"pinia": "^2.0.30",
"qrcode": "^1.5.1",
"swiper": "^9.0.5",
"swiper": "^8.4.5",
"vue": "^3.2.13",
"vue-i18n": "^9.2.2",
"vue-router": "^4.0.3",

107
public/static/offline/JSON/getActivityList1.json
View File

@ -58,113 +58,6 @@
"floorOrder": 1,
"point": 3,
"fileUrls": []
}, {
"activityId": 8328,
"activityName": "3331111",
"activityNameEn": "2222",
"activityContent": "2132132132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n",
"activityContentEn": "2222222",
"activityAddress": "232131",
"activityAddressEn": "22222",
"activityType": 1,
"shopCode": "",
"shopName": "",
"shopNameEn": "",
"houseNumber": "",
"fileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230608/TDc5S9Z6KiVElVCqooqMj.jpg",
"qrFileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230608/y268pw6m8ys3YmtKUKGno.jpg",
"startDate": "2023-05-31",
"endDate": "2023-07-11",
"building": "",
"buildingCode": "",
"buildingOrder": 0,
"floor": "",
"floorCode": "",
"floorOrder": 0,
"point": -1,
"fileUrls": [
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230608/EHvBuaTyC8GkoE_hwP3CE.jpg",
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230608/vRycElclvtkNVHAmPvFgy.jpg",
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230608/Z8l7mYY91oMk_qiLXbUVN.jpg"
]
},
{
"activityId": 4390,
"activityName": "444活动打扫宫斗是的呢佛山到哪放大说法达萨罗客服经理肯定萨芬发的",
"activityNameEn": "dddd",
"activityContent": "拉萨动静分离凯撒京东方",
"activityContentEn": "kljl",
"activityAddress": "41111",
"activityAddressEn": "",
"activityType": 1,
"shopCode": "",
"shopName": "",
"shopNameEn": "",
"houseNumber": "",
"fileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/AqUbanFt3SXwU2dT68uNy.jpg",
"qrFileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/fCutkOWSsjkSaGJ1OwX38.jpg",
"startDate": "2023-06-07",
"endDate": "2023-07-17",
"building": "濮园未来社区",
"buildingCode": "gAi7ksmAnlR22G8CyLXbI",
"buildingOrder": 0,
"floor": "L1",
"floorCode": "EuMWamqDI1Vd3v-oIYjY5",
"floorOrder": 1,
"point": 3,
"fileUrls": []
},
{
"activityId": 4390,
"activityName": "55444活动打扫宫斗是的呢佛山到哪放大说法达萨罗客服经理肯定萨芬发的",
"activityNameEn": "dddd",
"activityContent": "拉萨动静分离凯撒京东方",
"activityContentEn": "kljl",
"activityAddress": "41111",
"activityAddressEn": "",
"activityType": 1,
"shopCode": "",
"shopName": "",
"shopNameEn": "",
"houseNumber": "",
"fileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/AqUbanFt3SXwU2dT68uNy.jpg",
"qrFileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/fCutkOWSsjkSaGJ1OwX38.jpg",
"startDate": "2023-06-07",
"endDate": "2023-07-17",
"building": "濮园未来社区",
"buildingCode": "gAi7ksmAnlR22G8CyLXbI",
"buildingOrder": 0,
"floor": "L1",
"floorCode": "EuMWamqDI1Vd3v-oIYjY5",
"floorOrder": 1,
"point": 3,
"fileUrls": []
},
{
"activityId": 4390,
"activityName": "66444活动打扫宫斗是的呢佛山到哪放大说法达萨罗客服经理肯定萨芬发的",
"activityNameEn": "dddd",
"activityContent": "拉萨动静分离凯撒京东方",
"activityContentEn": "kljl",
"activityAddress": "41111",
"activityAddressEn": "",
"activityType": 1,
"shopCode": "",
"shopName": "",
"shopNameEn": "",
"houseNumber": "",
"fileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/AqUbanFt3SXwU2dT68uNy.jpg",
"qrFileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/fCutkOWSsjkSaGJ1OwX38.jpg",
"startDate": "2023-06-07",
"endDate": "2023-07-17",
"building": "濮园未来社区",
"buildingCode": "gAi7ksmAnlR22G8CyLXbI",
"buildingOrder": 0,
"floor": "L1",
"floorCode": "EuMWamqDI1Vd3v-oIYjY5",
"floorOrder": 1,
"point": 3,
"fileUrls": []
}
]
}

17
src/components/Carousel/Carousel.vue
View File

@ -1,27 +1,28 @@
<template>
<!--
:observer="true"
-->
<swiper
v-if="acList.length"
:modules="modules"
:slides-per-view="1.12"
:observer="true"
:centered-slides="true"
:initial-slide="acList.length !== 1 ? 1 : 0"
:loop="acList.length > 3 ? true : false"
:loop="acList.length >= 2 ? true : false"
:pagination="true"
:autoplay="acList.length > 3 ? { delay: 7000, disableOnInteraction: false } : false"
:autoplay="acList.length >= 2 ? { delay: 5000, disableOnInteraction: false } : false"
:dynamic-bullets="true"
:space-between="16"
class="myswiper"
>
<swiper-slide v-for="item in acList" :key="item.code">
<img :src="item.fileUrl" class="img" />
<swiper-slide v-for="item in acList" :key="item.advertisingCode">
<img :key="item.advertisingCode" :src="item.fileUrl" class="img" />
</swiper-slide>
</swiper>
<img v-else src="../../assets/images/nodata.svg" class="stay-tuned" alt="" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Pagination } from 'swiper'
import 'swiper/css'
@ -30,7 +31,7 @@ type AcType = {
acList: HomeImage[]
}
defineProps<AcType>()
const modules = ref([Autoplay, Pagination])
const modules = [Autoplay, Pagination]
</script>
<style lang="scss" scoped>
@ -51,7 +52,7 @@ const modules = ref([Autoplay, Pagination])
.myswiper {
height: 545px;
text-align: center;
.swiper-slide {
:deep(.swiper-slide) {
width: 800px;
height: 450px;
transition: all 0.3s linear;

2
src/types/home.d.ts
View File

@ -8,6 +8,6 @@ declare interface HomeBtn {
}
declare interface HomeImage {
code: string
advertisingCode: string
fileUrl: string
}

37
src/views/Activity/Activity.vue
View File

@ -17,19 +17,23 @@
:dynamic-bullets="true"
:observer="true"
:grab-cursor="true"
:width="547"
:slides-per-view="actList.length === 2 ? 1.7 : 1.92"
:slides-offset-before="actList.length === 2 ? 200 : -70"
-->
<Swiper
v-if="showList"
:slides-per-view="actList.length === 2 ? 1.7 : 1.92"
:width="675"
:slides-per-view="1"
:loop-additional-slides="1"
:slides-offset-before="203"
:centered-slides="true"
:space-between="32"
:loop="actList.length > 3"
:initial-slide="actList.length > 3 ? 1 : 0"
:slides-offset-before="actList.length === 2 ? null : -70"
:loop="actList.length > 1"
:initial-slide="actList.length > 2 ? 1 : 0"
:modules="modules"
:autoplay="actList.length > 3 ? { delay: 7000, disableOnInteraction: true } : false"
:autoplay="actList.length > 1 ? { delay: 5000, disableOnInteraction: false } : false"
:pagination="{ el: '.list-paginationh' }"
:class="{ 'is-center': actList.length === 1 }"
class="swiper-big animate__animated animate__fadeInUp"
@ -50,7 +54,7 @@ import ActivityItem from './ActivityItem.vue'
import TypeBtnList from '@/components/TypeBtnList/TypeBtnList.vue'
import { getMallActivity, getShopActivity } from '@/http/api/activity'
import { ref, nextTick } from 'vue'
import { ref } from 'vue'
import 'swiper/css'
import 'swiper/css/pagination'
import { Autoplay, Pagination } from 'swiper' //
@ -134,16 +138,15 @@ getData('mall')
height: 1200px;
margin-top: 80px;
margin-left: 0;
.swiper-wrapper {
.swiper-slide {
width: 547px !important;
height: 972px;
transition: all 0.3s linear;
transform-origin: center top;
&.swiper-slide-active {
width: 675px !important;
height: 1200px;
}
:deep(.swiper-slide) {
width: 547px; //!important;
height: 972px;
transition: all 0.3s linear;
transform-origin: center top;
&.swiper-slide-active {
width: 675px; // !important;
height: 1200px;
}
}
}

Write Preview
Loading…
Cancel
Save