七夕-探探小卡片鸿蒙版

Posted 2021-09-08 卡哇伊大喵

七夕来了，亲爱的程序员(农民工)们你们不会还没有女朋友吧。那我大喵就写一个探探鸿蒙版来给你们介绍女朋友吧。
 

探探一直是交友软件，他的交友流程主要是通过左滑右滑小卡片来选择喜欢的女孩，通过上滑小卡片表示超级喜欢这个女孩，通过点击小卡片进去详情页面。

然后呢我大喵就在想，如果把探探的这个小卡片从软件里面搬到桌面是不是会特别方便，比如在闲暇时间段，可以通过在桌面上点击探探鸿蒙小卡片左边或者右边来选择或者喜欢女孩，这样我们就可以在公交上、地铁上或者高铁上增加找到爱情的几率。

然后就有人说了，你看探探是通过左滑右滑来的，你就搞个点击也太LOW了吧。

我选择点击来实现功能主要是因为：
1.左右滑动和桌面滑动会冲突
2.实现简单(主要是我懒)

说了这么多我们来看一下真实效果，看看这个探探鸿蒙版的实际效果是否能打动单身的宅男程序员去下载呢

51CTO探探鸿蒙版演示视频
哔哩哔哩探探鸿蒙版演示视频
是不是很不错，我自己都给自己点了个赞

当然视频里面的探探鸿蒙版还是比较简陋的，其实就一个小卡片和一个女孩的一些资料的详情页，其他什么都没有，我做这个主要目的是想让别人看到鸿蒙小卡片能把之前在APP里面的效果搬到桌面上来，更方便的让用户使用之前APP相同的重要功能，大大的增加用户对软件的粘性，大大的增加软件在用户手机上的留存率，我希望探探能把原来APP的滑动找女朋友的功能放到桌面上来，这样大家可以就可以在闲暇时间也不会忘记找女朋友。

探探鸿蒙版主要内容

准备工作

因为需要请求图片和女孩的一些信息，需要把图片服务器域名地址和服务器地址加入白名单

小卡片

主要有几张图片组成的swiper,在for循环读取数组里面的图片数据

<swiper index="{{index}}" indicator="false" @click="top">
	<image class="girl_img"  src="http://xx.xx.xx.jpg" for=""></image>
</swiper>

复制

之后还有两个隐藏的按钮，通过点击left来增加swiper的index属性值+1，点击right来表示超级喜欢这个女孩

<div class="left" @click="left"></div>
<div class="right" @click="right"></div>

复制

然后还有一个biubiu的GIF图片

<image class="super_love" if="{{superLoveShow}}" src="/common/biu.gif"></image>

复制

女孩详情页

用户通过点击小卡片的swiper的top事件来拉起Page FA,这个FA就是女孩详情页面
女孩详情页面在打开的时候获取后台数据展示在页面上面

那这样文章就结束啦，下次再见