微信小程序如何实现左右滑动-创新互联

这篇文章将为大家详细讲解有关微信小程序如何实现左右滑动，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联公司是专业的大丰网站建设公司，大丰接单;提供成都做网站、网站建设,网页设计,网站设计,建网站,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许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页名称：微信小程序如何实现左右滑动-创新互联
标题来源：http://cdiso.cn/article/cdhjsg.html