TanTan-初试小程序之仿探探.zip
无论你是一个程序猿还是一个程序媛，每天干的事除了coding还是coding，代码不能解决的问题（什么问题自己心里还没点abcd数嘛），探探能帮你解决。最近网上特流行一款交友软件叫探探（据说是yp软件）。作为探探曾经的一名从来只浏览图片但是没有yue过的资深玩家同时又是一位热爱前端的妹子，我决定要仿一下这个app。既然是寄几开发，那还不是寄几说了算，毫无疑问整款APP的主题风格被我改成我最爱的终极少女粉了hhh，下面让我们一起来感受下探探的魅力吧~项目整体效果项目部分功能点解析主页图片左滑右滑对应按钮变化首先我们来聊一下最让我头痛的地方，就是主页面的左右滑动事件并且对应按钮会相应变化，即我左滑一下图片下面的灰色按钮会有相应的动画效果，右滑则对应着图片下面的红色按钮。对于一个刚入小程序坑的妹子来说，没有大神指点不知道要在这里面的逻辑坑还要绕多久才能绕出来。得一高人指点，我才完美滴实现了这个功能。这里写了三个大的盒子放着图片和文字信息,再将他们放到swiper-item里面，用swiper组件实现整个盒子的左右滑动
K
♂21
金牛座
文化/教育
哦盒子下面不是按钮，我是放了两张图片。
先给他们写个滑动的时候触发的动画效果.active { animation: active 1s ease;//定义一个叫做active的动画}
@keyframes active {//补充active动作脚本
0% { transform: scale(0.8);
}
50% { transform: scale(1.2);
}
100% { transform: scale(1.0);
}
}在page的data里面定义三个变量，将left,right变量绑定到对应图片中data: {
left: false ,
right: false,
activeIndex: 0
},在swiper绑定事件中具体判断左右滑动事件changeswiper: function(e) {
var index = e.detail.current;//当前所在页面的 index
if(index > this.data.activeIndex) {//左滑事件判断
this.setData({
left: true//若为左滑，left值为true,触发图片动画效果
})
} else if(index < this.data.activeIndex) {//右滑事件判断
this.setData({
right: true//若为右滑，right值为true,触发图片动画效果
})
}
setTimeout(() => {//每滑动一次，数据发生变化
this.setData({
activeIndex: index,
left:false,
right:false
})
}, 1000);
},从本地上传图片这个呀查一查小程序开发文档就好了，先在要上传图片的地方的src绑定个数据变量
imgUrl: '../../images/addImg.png'
},通过绑定tap事件将上传的图片地址替换进去uploadImg: function(e) {
var that = this;
wx.chooseImage({
count: 1, //上传图片数量
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
that.setData({
imgUrl: tempFilePaths
})
wx.showToast({//显示上传成功
title: '上传成功',
icon: 'success',
duration: 2000
})
}
})，配对成功列表据通过easy-mock获取后台数据block wx:for渲染一个包含多节点的结构块
{{item.nickname}}
{{item.message}}
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:模拟数据请求，实现无后端编程W3Cschool微信小程序开发教程手册文档：开发小程序要多看看哦小结emmmm目前项目功能还是很简单呀，还有很多功能后面慢慢实现吧~比如利用将上传的图片放到storage中，页面刷新之后图片依然在，slider滑动到某一处在页面上保存当前值，模拟配对成功后弹出提醒页面等等......也希望遇到热爱学习的小伙伴一起交流学习，一起在前端坑里越陷越深hhh项目地址：https://github.com/beautifulg... 求鼓励~求star呀~我的邮箱：804316947@qq.com 这里可以找到我哦作者：略略略
哦盒子下面不是按钮，我是放了两张图片。
先给他们写个滑动的时候触发的动画效果.active { animation: active 1s ease;//定义一个叫做active的动画}
@keyframes active {//补充active动作脚本
0% { transform: scale(0.8);
}
50% { transform: scale(1.2);
}
100% { transform: scale(1.0);
}
}在page的data里面定义三个变量，将left,right变量绑定到对应图片中data: {
left: false ,
right: false,
activeIndex: 0
},在swiper绑定事件中具体判断左右滑动事件changeswiper: function(e) {
var index = e.detail.current;//当前所在页面的 index
if(index > this.data.activeIndex) {//左滑事件判断
this.setData({
left: true//若为左滑，left值为true,触发图片动画效果
})
} else if(index < this.data.activeIndex) {//右滑事件判断
this.setData({
right: true//若为右滑，right值为true,触发图片动画效果
})
}
setTimeout(() => {//每滑动一次，数据发生变化
this.setData({
activeIndex: index,
left:false,
right:false
})
}, 1000);
},从本地上传图片这个呀查一查小程序开发文档就好了，先在要上传图片的地方的src绑定个数据变量
imgUrl: '../../images/addImg.png'
},通过绑定tap事件将上传的图片地址替换进去uploadImg: function(e) {
var that = this;
wx.chooseImage({
count: 1, //上传图片数量
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
that.setData({
imgUrl: tempFilePaths
})
wx.showToast({//显示上传成功
title: '上传成功',
icon: 'success',
duration: 2000
})
}
})，配对成功列表据通过easy-mock获取后台数据block wx:for渲染一个包含多节点的结构块
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:模拟数据请求，实现无后端编程W3Cschool微信小程序开发教程手册文档：开发小程序要多看看哦小结emmmm目前项目功能还是很简单呀，还有很多功能后面慢慢实现吧~比如利用将上传的图片放到storage中，页面刷新之后图片依然在，slider滑动到某一处在页面上保存当前值，模拟配对成功后弹出提醒页面等等......也希望遇到热爱学习的小伙伴一起交流学习，一起在前端坑里越陷越深hhh项目地址：https://github.com/beautifulg... 求鼓励~求star呀~我的邮箱：804316947@qq.com 这里可以找到我哦作者：略略略
文件下载
资源详情
[{"title":"（ 132 个子文件 6.18MB ） TanTan-初试小程序之仿探探.zip","children":[{"title":"address.png <span style='color:#111;'> 3.59KB </span>","children":null,"spread":false},{"title":"root.png <span style='color:#111;'> 3.95KB </span>","children":null,"spread":false},{"title":"like.png <span style='color:#111;'> 5.06KB </span>","children":null,"spread":false},{"title":"heart.png <span style='color:#111;'> 5.05KB </span>","children":null,"spread":false},{"title":"tv.png <span style='color:#111;'> 4.49KB </span>","children":null,"spread":false},{"title":"......","children":null,"spread":false},{"title":"<span style='color:steelblue;'>文件过多，未全部展示</span>","children":null,"spread":false}],"spread":true}]
评论信息
其他资源
- Adobe_Acrobat_XI_Pro中文使用教程
- 基于dsp的低频信号发生器
- 华为云服务HCIP-Cloud service（H13-821）题库
- Murach’s ADO.NET 4 Database Programming with C# 2010
- 计算机组成原理知识点整理
- 交通安全SSAM软件
- 基于DSP的气体检测系统的设计与实现
- 基于SSM的网上通讯录管理系统
- 色调，饱和度，亮度图，matlab
- IT运维管理系统管理制度
- java课程设计--电脑商品管理系统
- Matlab粗配准代码和图片
- STM8真正UFQFPN20封装,Altium格式,要是骗人木有JJ
- 西南科技大学《电力工程基础》作业及其答案.pdf
- 1200PLC三轴数控程序.rar
- 浙江理工大学2017-2019年历年研究生入学考试试卷，代码：213.pdf
- 专访赵桂华：.Net也有春天及高性能网站架构实践
- infinity pro
- Qt4.8.4和creator和mingw安装配置说明总结_非常有用
- pyInstaller
- javaWeb投票管理系统源码
- c++课程设计 学籍管理系统
- Hi3559V100／Hi3556V100 HD Mobile Camera SoC 用户指南
- keras实现中文文本分类
- C++图书管理系统代码
免责申明
【只为小站】的资源来自网友分享，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，【只为小站】 无法对用户传输的作品、信息、内容的权属或合法性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论 【只为小站】 经营者是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。
本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二条之规定，若资源存在侵权或相关问题请联系本站客服人员，zhiweidada#qq.com，请把#换成@，本站将给予最大的支持与配合，做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明
本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二条之规定，若资源存在侵权或相关问题请联系本站客服人员，zhiweidada#qq.com，请把#换成@，本站将给予最大的支持与配合，做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明