lcoco/pages/text/index.vue

<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>

<script>
	import Black from '@/components/en-utils/en-blank/en-blank'
	import pagingList from '@/components/en-list/en-list'
  import enPrice from '@/components/en-utils/en-price/en-price'
  import {likeGoods} from "@/api/goods";
  import UserContent from "@/pages/index/model/user-content";

	export default {
		components:{
      UserContent,
			Black,
      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:{
      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">
.content-box{
  overscroll-behavior: none;
  margin-top: 20rpx;
  width: 730rpx;
  height: 1200rpx;
  border-radius: 24rpx;
  overflow: hidden;
  .image {
    height: 1200rpx;
    width: 730rpx;

  }

}


</style>