微信小程序之滑动果冻效果
制作应用经常需要用到滑动的菜单,不仅可以节省空间,还可以给人一种好的体验效果。一起来感受一下
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图表动态赋值
微信小程序云开发入门(一)