189 8069 5689

javascript怎么才可以实现微信小程序左右滑动功能

这篇文章给大家分享的是有关javascript怎么才可以实现微信小程序左右滑动功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联服务项目包括米易网站建设、米易网站制作、米易网页制作以及米易网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，米易网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到米易省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

项目整体效果

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);
 },

从本地上传图片

javascript怎么才可以实现微信小程序左右滑动功能

这个呀查一查小程序开发文档就好了，先在要上传图片的地方的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获取后台数据

javascript怎么才可以实现微信小程序左右滑动功能

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://cdxtjz.cn/article/gpgcep.html

其他资讯