左右滑动你不再孤单无论你是程序员还是程序员，你每天做的不仅仅是码字还是码字，代码解决不了的问题（什么问题你心里还有没有点abcd号），探探可以帮你解决。最近网上很火的一款交友软件叫探探（据说是yp软件）。作为一个只会看图没用过Yue的前探探玩家，也是一个热爱前端的妹子，我决定仿制这款APP。既然是发几次贴开发的，那不是发几次贴的问题。毫无疑问，整个APP的主题风格都换成了我最喜欢的终极女粉hhh，让我们一起来感受一下夏探探的魅力吧。~项目整体效果。项目部分功能点分析。首页图片左右滑动对应按钮变化。首先说说我最头疼的地方，就是主页面上的左右滑动事件，对应的按钮会随之变化，就是我向左滑动图片。下方的灰色按钮会有相应的动画效果，右滑对应图片下方的红色按钮。对于一个刚入小程序坑的妹子来说，如果没有大神指点，不知道要多久才能从里面的逻辑坑里走出来。在高手的指导下，我完美的实现了这个功能。这里是三个包含图片和文字信息的大盒子，然后放入swiper-item中，使用swiper组件实现整个盒子的左右滑动K♂21金牛座Culture/Education哦，盒子下面没有按钮，我放两张图。给他们写一个滑动时触发的动画效果。active{animation:active1sease;//定义一个动画叫active}@keyframesactive{//补充activeactionscript0%{transform:scale(0.8);}50%{变换：缩放（1.2）；}100%{变换：缩放（1.0）；}}在页面的数据中定义三个变量，将左右变量绑定到对应的图片数据：{left:false,right:false,activeIndex:0}，绑定swiper中的事件具体判断左右slidingeventchangeswiper:function(e){varindex=e.detail.current;//当前页面的索引if(index>this.data.activeIndex){//左滑动事件判断this.setData({left:true//如果是左滑，左值为true，触发图片动画效果})}elseif(index{//每次滑动，数据都会改变这个。setData({activeIndex:index,left:false,right:false})},1000);}，从本地上传图片设置一个数据变量放入图片的默认地址，也就是上传前添加图片数据图片：{imgUrl:'../../images/addImg.png'},通过绑定点击事件uploadImg:function(e){varthat=this;wx.chooseImage({count:1,//上传图片数量sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认都有sourceType:['album','camera'],//可以指定来源是一个相册或者一个相机，默认两个都有success:function(res){//返回选中照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片vartempFilePaths=res.tempFilePaths;that.setData({imgUrl:tempFilePaths})wx.showToast({//显示上传成功title:'uploadsuccess',icon:'success',duration:2000})}}),配对成功list数据通过easy-mock后台数据块获取wx:forrenderingamulti-Nodestructureblock{{item.nickname}}{{item.message}}获取后台数据wx.request({url:'https://www.easy-mock.com/mock/5a23dbf382614c0dc1bebf04/getFriendsList/getFriendsList',success:(res)=>{//console.log(response);this.setData({friendsList:res.data.data.friendsList})}})剩下的差不多就是切页面了，个人原因，用不惯weui官方的风格，每个页面都是自己打码的，所以大家不爱敲喷，还在努力学习中~~~项目开发我们收到的一些工具有微信开发者工具、VScode、GithubIconfont阿里巴巴矢量图标库：各种图片、logo一应俱全，前端开发必备esay-mock：模拟数据请求，实现无需后台编程项目功能还是很简单的，功能还是很多的后面慢慢实现~比如把上传的图片放到storage中，页面刷新后图片还在，滑块滑动到页面某个地方保存当前值，模拟配对后成功，会弹出提醒页面等。。。也希望认识喜欢学习的朋友一起交流学习，一起在前端的坑里越陷越深hhh项目地址：https://github.com/beautifulg..请鼓励我~请star~我的邮箱：804316947@qq.com你可以在这里找到我
