微信小程序swiper组件切换+个人资料展示

这篇文章的主题就是swiper啦，不过swiper在真机上有个不好的点就是页面切换时会有闪烁回弹的感觉，不知道如何处理，希望有知道如何处理的小伙伴可以给出一些指导意见。那还是先来看看正常的切换吧，这篇主要是为了记录swiper的前后边距的使用。

先看一下常用的一些属性

image.png

这些属性还是比较常用的

看一下演示效果

swiper+个人资料切换.gif

• WXML

  
    
      
        
          
            
              
              {{item.name}}
            
          
          
            出生年月 : {{item.birth}}
            性别 : {{item.sex}}
            毕业院校 : {{item.graduate}}
            专业 : {{item.professional}}
            毕业时间 : {{item.graduateTime}}
             籍贯 : {{item.nativePlace}}
             邮箱 : {{item.email}}
          
        
      
    
  

• WXSS

page {
  height: 100%;
  background: #f3f3f3;
  position: relative;
}
.entire-module {
  width: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.swiperClass {
  margin: 0;
}
.user {
  position: relative;
  background: #f9f9f9;
  z-index: -2;
}
.active {
  transform: none;
  transition: all 0.2s ease-in 0s;
}
.quiet {
  transform: scale(0.9);
  transition: all 0.2s ease-in 0s;
}
.top {
  position: relative;
  width: 100%;
  height: 198rpx;
  background:#B0C4DE;
}
.user_avatar {
  width: 120rpx;
  height: 120rpx;
  background: rgb(226, 222, 222);
  margin-right: 20rpx;
}
.person_info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 40rpx;
}
.person_info>view {
  flex: 1;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 30rpx;
}
.one-line{
  font-size: 30rpx;
  margin-top: 2.6vh;
  padding-left: 3vw;
  /* padding: 1vh 3vw; */
}

• JS

Page({
  data: {
    list: [{
        img: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562746384&di=79b1c4202963a9b02db57e30d8986824&imgtype=jpg&er=1&src=http%3A%2F%2Fgss0.baidu.com%2F-4o3dSag_xI4khGko9WTAnF6hhy%2Fbainuo%2Fcrop%3D0%2C0%2C1130%2C1225%3Bw%3D640%3Bq%3D84%2Fsign%3D9858a73cdd09b3defff0be28f18f40b1%2F8718367adab44aede065beb0bf1c8701a18bfbbf.jpg",
        name: "张舒雅",
        birth: "1996年5月12日",
        sex:'女',
        graduate:"华东师范大学",
        professional:"软件工程",
        graduateTime:"2018年6月30日",
        nativePlace:"广东省广州市",
        email:"[email protected]" 
      },
      {
        img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562746427&di=d5f55b69d6fa62495fdd3b53d3efe56e&imgtype=jpg&er=1&src=http%3A%2F%2Fci.xiaohongshu.com%2Ff8098da8-b162-4b96-ba5a-86135475ca81%40r_750w_750h_ss1.jpg',
        name: "李思琦",
        birth: "1994年10月26日",
        sex: '女',
        graduate:"南京财经大学",
        professional: "计算机科学与技术",
        graduateTime: "2016年6月30日",
        nativePlace: "河南省安阳市",
        email: "[email protected]" 
      },
      {
        img: 'http://imgsrc.baidu.com/forum/w=580/sign=1598364951ee3d6d22c687c373176d41/1e4ebe096b63f6242fc51ced8f44ebf81b4ca311.jpg',
        name: "刘栋",
        sex: '男',
        birth: "1993年4月29日",
        graduate:"哈尔滨工业大学",
         professional: " 数字媒体技术",
        graduateTime: "2015年6月30日",
        nativePlace: "黑龙江哈尔滨市",
        email: "[email protected]" 
      }

    ],
    swiperIndex: 0, //这里不写第一次启动展示的时候会有问题
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        console.log(res);
        var swiperItemWidth = parseInt(res.windowWidth * 6 / 7);
        console.log(swiperItemWidth)
        var swiperItemHeigth = parseInt(swiperItemWidth / 2 * 3);
        var margin = parseInt((res.windowWidth - swiperItemWidth) / 2);
        that.setData({
          margin: margin,
          swiperItemHeigth: swiperItemHeigth,
          swiperItemWidth: swiperItemWidth,
          maxHeight: parseInt(swiperItemWidth / 0.62)
        })
        console.log('打印最大高度', that.data.maxHeight)
      },
    })
  },
  //轮播切换
  bindchange(e) {
    this.setData({
      swiperIndex: e.detail.current
    })
  },
})