javascript怎么才可以实现微信小程序左右滑动功能
这篇文章给大家分享的是有关javascript怎么才可以实现微信小程序左右滑动功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
成都创新互联服务项目包括米易网站建设、米易网站制作、米易网页制作以及米易网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,米易网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到米易省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
项目整体效果
项目部分功能点解析
主页图片左滑右滑对应按钮变化
首先我们来聊一下最让我头痛的地方,就是主页面的左右滑动事件并且对应按钮会相应变化,即我左滑一下图片下面的灰色按钮会有相应的动画效果,右滑则对应着图片下面的红色按钮。对于一个刚入小程序坑的妹子来说,没有大神指点不知道要在这里面的逻辑坑还要绕多久才能绕出来。得一高人指点,我才完美滴实现了这个功能。
这里写了三个大的盒子放着图片和文字信息,再将他们放到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绑定个数据变量
放入图片默认地址,就是上传图片之前的添加图片
data: { 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}}
获取后台数据
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的官方样式,每个页面都是我自己呕心沥血码出来的,所以大家不喜轻点喷哈,还在努力学习当中。
感谢各位的阅读!关于“javascript怎么才可以实现微信小程序左右滑动功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
名称栏目:javascript怎么才可以实现微信小程序左右滑动功能
新闻来源:http://myzitong.com/article/gpgcep.html