微信小程序如何实现左右滑动-创新互联
这篇文章将为大家详细讲解有关微信小程序如何实现左右滑动,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联公司是专业的大丰网站建设公司,大丰接单;提供成都做网站、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行大丰网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!项目整体效果
项目部分功能点解析
主页图片左滑右滑对应按钮变化
首先我们来聊一下最让我头痛的地方,就是主页面的左右滑动事件并且对应按钮会相应变化,即我左滑一下图片下面的灰色按钮会有相应的动画效果,右滑则对应着图片下面的红色按钮。对于一个刚入小程序坑的妹子来说,没有大神指点不知道要在这里面的逻辑坑还要绕多久才能绕出来。得一高人指点,我才完美滴实现了这个功能。
这里写了三个大的盒子放着图片和文字信息,再将他们放到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 }) } })
关于“微信小程序如何实现左右滑动”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站标题:微信小程序如何实现左右滑动-创新互联
URL网址:http://scyanting.com/article/cdhjsg.html