|
|
@@ -1,6 +1,17 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
+ <z-swiper v-model="swiperList" :options="options" @slideChange="onChange">
|
|
|
+ <z-swiper-item :custom-style="slideCustomStyle" v-for="(item,index) in swiperList" :key="index">
|
|
|
+ <scroll-view class="content-box" :scroll-y="true" :bounces="false">
|
|
|
|
|
|
+ <image class="image" :src="item.image" mode="aspectFill">
|
|
|
+ </image>
|
|
|
+ {{item.image}}
|
|
|
+ <user-content></user-content>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ </z-swiper-item>
|
|
|
+ </z-swiper>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -18,107 +29,181 @@
|
|
|
pagingList,
|
|
|
enPrice,
|
|
|
},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ slideCustomStyle: {
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center',
|
|
|
+ borderRadius: '36rpx'
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ speed:600,
|
|
|
+ loop : true,
|
|
|
+ effect: 'cards',
|
|
|
+ cardsEffect: {
|
|
|
+ rotate: false,
|
|
|
+ perSlideOffset: 1,
|
|
|
+ perSlideRotate: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ swiperList: [
|
|
|
+ {
|
|
|
+ image: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F55bf2cb3j00qvpu70002cc000hs012jc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ images: [
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2Fc7a27a1ej00qvpu700019c000hs00vlc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F9f81e6aaj00qvpu70001xc000hs00vmc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F55bf2cb3j00qvpu70002cc000hs012jc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F2017725bj00qvpu70001jc000hs00zxc.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
|
|
|
+ ],
|
|
|
+ title: '你好',
|
|
|
+ age: '19',
|
|
|
+ distance: '19.6',
|
|
|
+ city: '香港九龙城',
|
|
|
+ weChat: 'siococos',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F2017725bj00qvpu70001jc000hs00zxc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ images: [
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2Fc7a27a1ej00qvpu700019c000hs00vlc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F9f81e6aaj00qvpu70001xc000hs00vmc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F55bf2cb3j00qvpu70002cc000hs012jc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F2017725bj00qvpu70001jc000hs00zxc.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
|
|
|
+ ],
|
|
|
+ title: '你好',
|
|
|
+ age: '19',
|
|
|
+ distance: '19.6',
|
|
|
+ city: '香港九龙城',
|
|
|
+ weChat: 'siococos',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2Fc7a27a1ej00qvpu700019c000hs00vlc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ images: [
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2Fc7a27a1ej00qvpu700019c000hs00vlc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F9f81e6aaj00qvpu70001xc000hs00vmc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F55bf2cb3j00qvpu70002cc000hs012jc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F2017725bj00qvpu70001jc000hs00zxc.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
|
|
|
+ ],
|
|
|
+ title: '你好',
|
|
|
+ age: '19',
|
|
|
+ distance: '19.6',
|
|
|
+ city: '香港九龙城',
|
|
|
+ weChat: 'siococos',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ swiperIndex:1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const arr = []
|
|
|
+ /* 测试数据*/
|
|
|
+ const tu = [
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2Fc7a27a1ej00qvpu700019c000hs00vlc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F9f81e6aaj00qvpu70001xc000hs00vmc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F55bf2cb3j00qvpu70002cc000hs012jc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F2017725bj00qvpu70001jc000hs00zxc.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
|
|
|
+ ]
|
|
|
+ for (let index = 0; index < 10; index++) {
|
|
|
+ const n = Math.floor(Math.random() * (tu.length - 1))
|
|
|
+ let data = {
|
|
|
+ image: tu[n],
|
|
|
+ images: [
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2Fc7a27a1ej00qvpu700019c000hs00vlc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F9f81e6aaj00qvpu70001xc000hs00vmc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F55bf2cb3j00qvpu70002cc000hs012jc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F2017725bj00qvpu70001jc000hs00zxc.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
|
|
|
+ ],
|
|
|
+ title: '你好',
|
|
|
+ age: '19',
|
|
|
+ distance: '19.6',
|
|
|
+ city: '香港九龙城',
|
|
|
+ weChat: 'siococos',
|
|
|
+ }
|
|
|
+ arr.push(data)
|
|
|
+ }
|
|
|
+ this.list = arr
|
|
|
+ // this.setSwiperList(0)
|
|
|
+ },
|
|
|
methods:{
|
|
|
- getGoodsList(page){
|
|
|
- likeGoods({'page':page}).then((res)=>{
|
|
|
- if(res.code===1){
|
|
|
- this.$refs.likeGoodsList.setList(res.data.list,res.data.total)
|
|
|
+ onChange(swiper, index) {
|
|
|
+ console.log(this.swiperList)
|
|
|
+ uni.showToast({
|
|
|
+ title: '当前 swiper 索引：' + index,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ this.setSwiperList(index)
|
|
|
+ },
|
|
|
+ setSwiperList(swiperIndex){
|
|
|
+ this.swiperIndex=swiperIndex
|
|
|
+ if(this.swiperList.length<=0){
|
|
|
+ this.swiperList.push( this.list.splice(0,1))
|
|
|
+ let newSwiperItem=this.list.splice(0,1);
|
|
|
+ console.log(newSwiperItem)
|
|
|
+ this.swiperList.push(newSwiperItem)
|
|
|
+ this.swiperList.push(newSwiperItem)
|
|
|
+ console.log(this.swiperList)
|
|
|
+ }else {
|
|
|
+ let newSwiperItem=this.list.splice(0,1);
|
|
|
+ console.log(newSwiperItem)
|
|
|
+ // this.swiperList.forEach((item,key)=>{
|
|
|
+ // if(key!==this.swiperIndex){
|
|
|
+ // this.swiperList[key]=newSwiperItem;
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ this.change()
|
|
|
+
|
|
|
+ },
|
|
|
+ change() {
|
|
|
+ // 判断倒数
|
|
|
+ if ( this.list.length<=5) {
|
|
|
+ // 模拟一下最加数据
|
|
|
+ const tu = [
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2Fc7a27a1ej00qvpu700019c000hs00vlc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F9f81e6aaj00qvpu70001xc000hs00vmc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F55bf2cb3j00qvpu70002cc000hs012jc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F2017725bj00qvpu70001jc000hs00zxc.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
|
|
|
+ ]
|
|
|
+ for (let index = 0; index < 10; index++) {
|
|
|
+ const n = Math.floor(Math.random() * (tu.length - 1))
|
|
|
+ let newdata = {
|
|
|
+ image: tu[n],
|
|
|
+ images: [
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2Fc7a27a1ej00qvpu700019c000hs00vlc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F9f81e6aaj00qvpu70001xc000hs00vmc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F55bf2cb3j00qvpu70002cc000hs012jc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
|
|
+ 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F2017725bj00qvpu70001jc000hs00zxc.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
|
|
|
+ ],
|
|
|
+ title: '你好',
|
|
|
+ age: '19',
|
|
|
+ distance: '19.6',
|
|
|
+ city: '香港九龙城',
|
|
|
+ weChat: 'siococos',
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
+ this.list.push(newdata)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(data);
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- @font-face {
|
|
|
- font-family: 'iconfont';
|
|
|
- src: url('/components/static/icon/iconfont.ttf') format('truetype');
|
|
|
- }
|
|
|
- .iconfont {
|
|
|
- font-family: "iconfont" !important;
|
|
|
- font-style: normal;
|
|
|
- -webkit-font-smoothing: antialiased;
|
|
|
- -moz-osx-font-smoothing: grayscale;
|
|
|
- }
|
|
|
- .goods-list{
|
|
|
- background-color: #F5F5F5;
|
|
|
- margin: 0 24rpx;
|
|
|
- .goods-item{
|
|
|
- width: 100%;
|
|
|
- height: 364rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- border-radius: 20rpx;
|
|
|
- margin: 20rpx 0;
|
|
|
- display: flex;
|
|
|
- .goods-item-left{
|
|
|
- padding: 24rpx;
|
|
|
- .goods-item-img{
|
|
|
- width:316rpx;
|
|
|
- height:316rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .goods-item-right{
|
|
|
- width:100%;
|
|
|
- height:300rpx;
|
|
|
- padding:32rpx 30rpx 32rpx 0;
|
|
|
- position:relative;
|
|
|
- //display: flex;
|
|
|
- //align-content: space-between;
|
|
|
- .goods-item-name{
|
|
|
- color: #333333;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 600;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .goods-item-price{
|
|
|
- position:absolute;
|
|
|
- bottom: 32rpx;
|
|
|
- .item-price{
|
|
|
+.content-box{
|
|
|
+ overscroll-behavior: none;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ width: 730rpx;
|
|
|
+ height: 1200rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ .image {
|
|
|
+ height: 1200rpx;
|
|
|
+ width: 730rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
|
|
|
- }
|
|
|
- .item-market{
|
|
|
- text{
|
|
|
- color: #999999;
|
|
|
- font-size: 24rpx;
|
|
|
- line-height: 34rpx;
|
|
|
- padding: 0 20rpx 0 0;
|
|
|
- }
|
|
|
- .iconfont{
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .goods-item-platform{
|
|
|
- height: 32rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- .goods-item-tp{
|
|
|
- padding: 4rpx 8rpx;
|
|
|
- color: #975BFE;
|
|
|
- width: 90rpx;
|
|
|
- height: 30rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- line-height: 28rpx;
|
|
|
- border: 2rpx solid #985DFF;
|
|
|
- border-radius: 4rpx;
|
|
|
- }
|
|
|
- .goods-item-jd{
|
|
|
- padding: 4rpx 8rpx;
|
|
|
- border-radius: 6rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: 24rpx;
|
|
|
- line-height: 28rpx;
|
|
|
- background: linear-gradient(90deg, #FD3229 0%, #FC7A28 100%);
|
|
|
- }
|
|
|
- }
|
|
|
- .goods-item-zh{
|
|
|
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
</style>
|
sys