微信小程序动画效果切换菜单

最新推荐文章于 2024-08-12 10:51:34 发布

你管我管你疯啊

最新推荐文章于 2024-08-12 10:51:34 发布

阅读量929

点赞数 1

分类专栏：微信小程序-知识总结文章标签：动画小程序

本文链接：https://blog.csdn.net/weixin_45527865/article/details/120849786

版权

微信小程序-知识总结专栏收录该内容

47 篇文章 2 订阅

订阅专栏

该博客介绍了一种使用微信小程序实现滑动菜单的方法。通过调整`move-item`的`translateX`属性和设置`item`的`active`类来实现选中效果。在`onLoad`中获取元素尺寸，并在`selectManu`事件中更新状态。样式包括圆角、居中、等间距布局以及过渡效果，使得菜单滑动平滑。

摘要由CSDN通过智能技术生成

在这里插入图片描述



<view class="box" style="position:relative;">
  <view class="move-item" style="transform:translateX({{transX}}px);width:{{width}}px;"></view>
  <view class="item {{active===index?'active':''}}" wx:for="{{list}}" key='*this' bindtap="selectManu" data-ind='{{index}}' style="z-index:2;">{{item}}</view>
</view>


Page({
  data: {
    list: ['菜单1', '菜单2', '菜单3'],
    width:0,
    active: 0,
    transX:0
  },
  onLoad() {
    let query = this.createSelectorQuery().in(this);
    query.select('.item').boundingClientRect(res => {
      this.setData({
        width:res.width
      })
    }).exec()
  },
  selectManu(e) {
    if(e.currentTarget.dataset.ind==this.data.active){
      return
    }
    this.setData({
      active: e.currentTarget.dataset.ind,
      transX:e.currentTarget.dataset.ind*this.data.width
    })
  },
})

.box{
  border-radius: 10rpx;
  font-size: 24rpx;
  width: 100%;
  height: 80rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10rpx;
  box-sizing: border-box;
  overflow: hidden;

}
.item{
  width: 100%;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  border-radius: 10rpx;
}
.move-item{
  height: 60rpx;
  line-height: 60rpx;
  background-color: #E5EBFF;
  transition: all .2s ease ;
  position: absolute;
  border-radius: 10rpx;
  left:10rpx;
  top:10rpx;
  z-index: 0;
}
.active{
  color: #2d59df;

}