小程序横向滑动效果

小程序横向滑动效果

人生第一份前端工作的第一个项目就涉及到了小程序的横向滑动效果，翻阅了网上各种资料和官方文档，终于做得比较理想了。不多说，开始上代码

1大概的效果

1.下面滑动方块的时候上面的文字需要跟着变化
2.点击下面方块的时候，被点击的方块会移动到最中间，同事上面的内容也要变化
3.需要使用scroll-view组件

代码

1.wxml的代码

<view class='content'>
  <view class='contentimg'>
    <image src="{{content.img}}"></image>//此处是兄贵的大图
  </view>
  <text class='contitle'>{{content.title}}</text>//兄贵的题目
  <scroll-view scroll-y="true" class='scrolltext'>
  //这个是纵向滚动 防止文字内容太多溢出
    <text class='contenfont' >{{content.mes}}</text>
  </scroll-view>
</view>
<view>

****重点****
// scroll-view组件 大家可以去官方文档看介绍 
// scroll-left：在js的data中绑定一个值，可以设置它滚到那个值
// bindscroll：滚动时触发的方法
  <scroll-view scroll-left="{{slideLeft}}" 
               scroll-x="true" 
               bindscroll="scroll" >
  //放一个DIV做控制             
    <view class='voucherContent'>
    //这个DIV是为了占位置让左边留白 刚好让第一个在大方块的中间
      <view style='width:275rpx'></view>
      //for循环让data的数据列出来 再绑定按钮bindtap="changecont" 和按钮传值data-index="{{index}}" 数组的索引
      <view class='voucherList' wx:for="{{customerList}}" wx:key="bb" data-index="{{index}}" bindtap="changecont">
        <image class='voucherBg' src="{{item.img}}"></image>
      </view>
      <view style='width:310rpx'></view>//右边留白
    </view>
  </scroll-view>
</view>

2.wxss的代码

.voucherContent {
  margin-top: 10rpx;
  width: 100%;
  display: -webkit-box;
  -webkit-overflow-scrolling: touch;
}

.voucherList {
  position: relative;
  width: 150rpx;
  height: 150rpx;
  background-color: #fff;
  border-radius: 6rpx;
  margin-left: 15rpx;
  margin-right: 15rpx;
  text-align: center;
}
.voucherBg {
  margin-left: 25rpx;
  margin-top: 25rpx;
  display: block;
  height: 100rpx;
  width: 100rpx;
}
//其实最主要的就是下面滚动的样式 上面内容就不放了

3.js的代码

Page({
  data: {
    content:{},//大方块内容的数据
    customerList:[
      {
        img:'../images/icon6.jpg',
        title:'第一页',
        mes:'我爱兄贵1号'
        },
      {
        img: '../images/icon6.jpg',
        title: '第二页',
        mes: '我爱兄贵2号'
      },
      {
        img: '../images/icon6.jpg',
        title: '第三页',
        mes: '我爱兄贵3号'
      },
      {
        img: '../images/icon6.jpg',
        title: '第四页',
        mes: '我爱兄贵4号'
      },
      {
        img: '../images/icon6.jpg',
        title: '第五页',
        mes: '我爱兄贵5号'
      },
      {
        img: '../images/icon6.jpg',
        title: '第六页',
        mes: '我爱兄贵6号'
      },
    ],
    slideLeft: 0,//绑定scroll-view 组件的  scroll-left属性的值
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  //点击进来让大方块拿第一条数据
    let customerList = this.data.customerList;
     this.setData({
       content: customerList[0]
     })
  },
  //点击方块改变内容和滚动
  changecont:function(e){
  /* 
      当点击的时候 要让小方块的正中心刚好在大方块的正下方
      我们在点击事件中 传值传了数组的索引进来，先用index获取一下索引
      如果为0 正好就是scroll-view组件绑定的scroll-left="{{slideLeft}}的值为0
  */
    let list = this.data.customerList;
    let index=e.currentTarget.dataset.index;
    if(index==0){
      this.setData({
        slideLeft:0
      })
      /* 
        算出让第二个滚到正中的距离 让index去成这个值 我这里刚好100（最好动态）
   
      */
    }else if(index>0 && index<list.length-1){
      let move = index*100
      this.setData({
        slideLeft: move
      })
    }else {
      this.setData({
        slideLeft: 500
      })
    }
  },
 //滚动触发的函数
  scroll:function(e){
    let customerList = this.data.customerList;
    /*
       思路：e.detail.scrollLeft是滚动了多少的值
       在设置样式中 只要滚动小于60第一个小方块都在中间 
    */
    if (e.detail.scrollLeft<60){
      this.setData({
        content: customerList[0]
      })
    }
    /*
       在中间的怎么办呢？
       算出倒数第二个的滚动值 然后减去第一个进入第二个的滚动值再除以数组的长度减二，
       因为我只要中间的，向上取整得到索引 在赋值给大方块
    */
    else if (e.detail.scrollLeft > 60 && e.detail.scrollLeft<450){
      let scrol = (450 - 60) / (customerList.length-2);
      
      let index=Math.ceil((e.detail.scrollLeft - 60) / scrol);
      this.setData({
        content: customerList[index]
      })
      /*
         最后一个就是大于450的滚动度
      */
    } else if (e.detail.scrollLeft > 450 ){
      this.setData({
        content: customerList[customerList.length-1]
      })
    }
  },
})

滚动效果就实现了 但是还是会有美中不足的就是动画效果
下次我再把动画效果补上给大家
好了今天就记录到这 有更好方法的小伙伴可以提出来大家一起交流