微信小程序折叠菜单

wxml

<view class='{{v}}' style='width:{{width}}rpx'>
  <view bindtap='change' class='btn'>tap</view>
  <view>tap</view>
  <view>tap</view>
  <view>tap</view>
</view>

wxss

view{
  width: 166rpx;
  height: 100rpx;
  display: inline-block;
  background-color: red;
  
  text-align: center;
}
.v1{
  position: absolute;
  right: 30rpx;
  margin: 300rpx auto;
  line-height: 100rpx;
  background-color: whitesmoke;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 12rpx;
 
}

.v2{
  
  border-radius: 12rpx;
   position: absolute;
  right: 30rpx;
  
  margin: 300rpx auto;
  line-height: 100rpx;
  background-color: rgb(126, 119, 119);
  overflow: hidden;
  white-space: nowrap;

}
.v2 view{
  
}

.btn{
  width: 100rpx;
  height: 100rpx;
  display: inline-block;
  background-color: blue;
  text-align: center;
}
.v2 .btn{
  width: 100rpx;
  height: 100rpx;
  display: inline-block;
  background-color: blue;
  text-align: center;
}

js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    imgsrc: '',
    animationData: {},
    text: 'Linux操作系统诞生于1991 年10 月5 日（这是第一次正式向外公布时间）。Linux存在着许多不同的Linux版本，但它们都使用了Linux内核。',
    animationData2: {},
    v: 'v1',
    width:100
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function() {
    var _this = this;
    var animation = wx.createAnimation({
      duration: 18000,
      delay: 0
    })
    animation.translateX(350).step()
    this.setData({
      animationData: animation.export()
    })
    setInterval(function() {
      animation.translateX(-this.data.text.length * 12).step()
      animation.translateX(350).step({
        duration: 0
      })
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 100) //按理公告移动速度会变低，实际并没有
  },
  upimage: function() {
    var _this = this
    wx.chooseImage({
      success: function(res) {
        console.log(res)
        wx.saveFile({
          tempFilePath: res.tempFilePaths[0],
          success: function(e) {
            wx.setStorage({
              key: 'bgimg',
              data: e.savedFilePath
            })
            _this.setData({
              imgsrc: wx.getStorageSync("bgimg")
            })
          }
        })
      },
    })
  },
  change: function() {
    var _this = this;
    var v = this.data.v;
    if (v == "v1") {
      this.setData({
        v: 'v2'
      })
      var width = 100;
      var xh = setInterval(function () {
        width += 10;
        console.log(_this.data.width)
        _this.setData({
          width: width
        })
        if (width >= 600) {
          clearInterval(xh)
        }
      }, 5)
    
    }else{
      this.setData({
        v: 'v1'
      })
      var width = 600;
      var xh = setInterval(function () {
        if (width <= 100) {
          clearInterval(xh)
        }
        width -= 10;
        console.log(_this.data.width)
        _this.setData({
          width: width
        })
        
      }, 5)
    }
  }
})