更新记录

1.4（2023-12-07）

更新文档

1.3（2023-12-07）

优化代码解除限制更新说明

1.2（2023-11-24）

更新说明，更新数据后组件重置操作

平台兼容性

介绍

仿热门社交软件探探首页图片左右滑动，纯代码不依赖任何插件单组件代码才10多KB，流畅不卡顿。

简单案例

<template>
  <view>
    <tantan 
        v-if="list.length > 0"  
        :list="list"
        :visible="visible"
        @="change" 
        @onClickImage="clickImage"
    ></tantan>
  </view>
</template>

<script>
import tantan from '@/components/dgex-tantan/dgex-tantan.vue'
export default {
  components: {
    tantan
  },
  data() {
    return {
        list: [],
        visible: 5
    }
  },
  mounted() {
    this.list = this.testData()
  },
  methods: {
    change(data) {
            console.log(data);
    },
    clickImage(data) {
            console.log(data);
    },
    testData() {
        const arr = []
        /* 测试数据*/
        const tu = [
            "https://pic1.zhimg.com/50/v2-fc82ae5d95b116d105932e8bdf38b920_720w.jpg?source=2c26e567",
            "https://picx.zhimg.com/50/v2-2ff9dc184a4fa00fa1e0c493013d8d13_720w.jpg?source=2c26e567",
            "https://picx.zhimg.com/50/v2-a4b356c00dfc7c92c5b69d533e99aa8f_720w.jpg?source=2c26e567",
            "https://picx.zhimg.com/50/v2-ad949fa892116bd98fa02968fb517dd5_720w.jpg?source=2c26e567",
            "https://picx.zhimg.com/50/v2-94d1226578c67f8f25893b5972acaa43_720w.jpg?source=2c26e567",
            '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 < 5; index++) {
          const n = Math.floor(Math.random() * (tu.length - 1))
          const randomNumber = Math.floor(Math.random() * 100);
          let data = {
            image: tu[n],
            title: '探探',
            desc: `${n}${randomNumber / 2}m${randomNumber}分钟前活跃`,
            tags: ['射手座']
          }
          arr.push(data)
        }
        return arr
    }
  }
}
</script>

参数

Props

Props list说明

Events

更新/追加数据的特别说明

// 在@中处理
...
change(data) {
    // 判断倒数
    // 情况一 如果是追加数据，合并数组即可
    if (data.currentIndex > this.list.length - 5) {
        this.list = this.list.concat(this.testData())
    }
    // or
    // 情况二 如果是更新数据需要同时重置组件，使用v-if重置组件 重置会闪屏自行处理加个动画
    this.list = []
    this.$nextTick(() => {
        this.list = this.testData()
    })
}

IOS上下滑动回弹效果影响

// 关闭效果
"pages": [
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "uni-app",
            // 将回弹属性关掉
            "bounce":"none"
        }
    }
]

一些其它

• Web仿App动画性能上还是有点鸡肋
• 如有其他问题，请在下方留言
• 反馈问题留言或复现步骤录屏同代码发送到910547462@qq.com

点赞

• 喜欢该功能欢迎到gitee点Star～，后续会更新其他功能