微信小程序之滑动果冻效果

微信小程序之滑动果冻效果

制作应用经常需要用到滑动的菜单，不仅可以节省空间，还可以给人一种好的体验效果。一起来感受一下
wxml代码：

<view class="main">
   <movable-area class="box1">
      <movable-view class="boxScorll" bindtouchend="jelly" style="width:{{width}}px" bindchange="getXY" x="{{x}}" direction="horizontal">
        <view wx:for="123456" wx:key="index" class="{{index == id ? 'pet_img':'pet_small_img'}}" bindtap="changePet" data-index="{{index}}">
          <image class="{{index == id ? 'head_img':'head_small_img'}}" mode="scaleToFill" src=""></image>
          <text class="pet_name">选项{{index+1}}</text>
        </view>
      </movable-view>
   </movable-area>
</view>

wxss代码：

.box1{
  width:240rpx;
  height: 250rpx;
  display: flex;
  background-color: #ffffff;
  top:-2rpx;
  padding-top:12rpx;
  margin: 0 auto;
  left: -30rpx;
}

.boxScorll{
  min-width: 1250rpx;
  height: 250rpx;
  display: flex;
}

.pet_img{
  width: 180rpx;
  height: 230rpx;
  margin-left: 60rpx;
}

.head_img{
  width: 180rpx;
  height: 180rpx;
  border-radius: 180rpx;
  background: #eee;
  border: 1px solid #999;
}

.pet_name{
  display: block;
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  color: #999;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.pet_small_img{
  width: 180rpx;
  height: 180rpx;
  border-radius: 180rpx;
  margin-top:30rpx;
  margin-left: 60rpx;
}

.head_small_img{
  display: block;
  width: 120rpx;
  height: 120rpx;
  border-radius: 80rpx;
  margin: auto;
  background: #eee;
  border: 1px solid #999;
}

js代码：

let last_x = 0
let id = 0
let width
let left
Page({

  /**
   * 页面的初始数据
   */
  data: {
    id: 0,
    x:0,
    width:500
  },
  /**
 * 生命周期函数--监听页面加载
 */
  onLoad: function (options) {
    let query = wx.createSelectorQuery();
    query.select('.pet_img').boundingClientRect()
    let that = this
    query.exec(function (res) {
      width = res[0].width + res[0].left
      left = res[0].left
      that.setData({
        width:width*6+left
      })
    })
  },
  /**
   * 获取滚动xy点
   */
  getXY:function(e){
    let x = Math.abs(e.detail.x)
    let new_id = Math.round(x/width)
    if(new_id != id){
      last_x = new_id*width
      this.setData({
        id: new_id
      })
      id = new_id
    }
  },
  /**
   * 果冻滑行
   */
  jelly:function(){
    this.setData({
      x: -last_x
    })
  },
  /**
   * 点击切换
   */
  changePet:function(e){
    let new_id = e.currentTarget.dataset.index
    if(id != new_id){
      last_x = new_id * width
      this.setData({
        x: -last_x
      })
    }
  }
})

最终效果如下：

热爱编程的您可复制链接交流：【小程序+云开发】(非技术勿扰）
分享不易，点赞关注给作者一点点鼓励，谢谢您！

猜你感兴趣：
6步实现微信小程序获取群排名与群openGid
微信小程序引入Vant组件库
微信小程序云函数获取时间相差8小时
mint-ui 引入日期时间选择器Datetime picker
微信小程序引入echarts图表
mint-ui 单选列表Radio以及多选列表Checklist的引入
微信小程序给echarts图表动态赋值
微信小程序云开发入门（一）