微信小程序自定义标题栏、语言切换、侧边抽屉菜单栏、底部菜单栏动画，多行文本垂直滚动，单行文本水平滚动

  下载地址  https://download.csdn.net/download/ink_s/12478409

 

 

 

 

 

//app.js
var that;
 var localList = require("./utils/languages.js")
// var WxNotificationCenter = require('./utils/WxNotificationCenter.js')
App({
  onLaunch: function () {

    that = this;
    wx.setKeepScreenOn({
      keepScreenOn: true
    })


    //国际化
    let lang = wx.getSystemInfoSync().language
    console.log("lang:" + lang)

    if (wx.getStorageSync("lang") == "") {
      wx.setStorageSync("lang", lang)
    } else {
      lang = wx.getStorageSync("lang")
    }


   if (lang == "en") {
      //英文
      that.globalData.local = localList.languages["en"]
      that.globalData.lang = "en"
    } else {
      //默认 中文
      that.globalData.local = localList.languages["zh"]
      that.globalData.lang = "zh"
    }
    
    wx.getSystemInfo({
      success: function (res) {
        that.globalData.statusBarHeight = res.statusBarHeight;
        let totalTopHeight = 68
        if (res.model.indexOf('iPhone X') !== -1) {
          totalTopHeight = 88
        } else if (res.model.indexOf('iPhone') !== -1) {
          totalTopHeight = 64
        }
        that.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight
      }
    })


    const updateManager = wx.getUpdateManager()

    updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
      console.log("请求完新版本信息")
      console.log(res.hasUpdate)
    })

    updateManager.onUpdateReady(function () {
      wx.showModal({
        title: "更新",
        content: "发现新版本",
        cancelText: "取消",
        confirmText: "确定",
        success: function (res) {
          if (res.confirm) {
            // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
            updateManager.applyUpdate()
          }
        }
      })

    })

    updateManager.onUpdateFailed(function () {
      // 新的版本下载失败
      console.log("新的版本下载失败")
    })


  },
  globalData: {
    userInfo: null,
    statusBarHeight: 20,
    titleBarHeight: 44,
    isLinked: false,
    local: localList.languages["zh"],
    lang: "zh",

  }
})

 

 

 

 

//index.js
//获取应用实例
const app = getApp()
var localList = require("../../utils/languages.js")
var that;
//上次按钮点击时间
var lasttime = 0;
//按键防抖时间
var clickTime = 200;
//设备（Android  iOS pc）
var platform;
//系统版本
var systemVersion;
//屏幕宽度
var screenWidth = 0;
//底部导航栏高度，单位RPX；
//现在的机型；
var model;
var barH = 0;
var windowHeight;
var ratio;
var clientWidth;
var clientHeight;
var previewUrgenOn = false;
var previewNoticeOn = false;
function notice(text, bgColor, textColor) {
  this.text = text;
  this.bgColor = bgColor;
  this.textColor = textColor;
}

Page({
  data: {
    local: app.globalData.local,
    statusBarHeight: app.globalData.statusBarHeight,
    titleBarHeight: app.globalData.titleBarHeight,
    languageColor1: app.globalData.lang == "zh" ? "#e74b63" : "#aaaaaa",
    languageColor2: app.globalData.lang == "en" ? "#e74b63" : "#aaaaaa",
    sidebarDisplay: "hidden",
    popupControlDisplay: "hidden",
    previewUrgenDisplay: "hidden",
    previewNoticeDisplay: "hidden",

  },
  
  onLoad: function () {
    that = this;
    wx.getSystemInfo({
      success: function (res) {
        platform = res.platform
        systemVersion = res.system
        screenWidth = res.screenWidth
        model = res.model

        // 获取可使用窗口高度
        clientHeight = res.windowHeight;
        // 获取可使用窗口宽度
        clientWidth = res.windowWidth;
        // 算出比例
        ratio = 750 / clientWidth;
        // 算出高度(单位rpx)
        windowHeight = clientHeight * ratio;
      }
    });
  
    var contentH = clientHeight - (app.globalData.titleBarHeight + app.globalData.statusBarHeight) - (70/ ratio);
    var sidebarH = clientHeight - (app.globalData.titleBarHeight + app.globalData.statusBarHeight);
    var sidebarScrollH = sidebarH - (100 / ratio);
    that.setData({
      contentH:contentH,
      sidebarH: sidebarH + 'px',
      sidebarScrollH: sidebarScrollH + 'px',
    })
  },




  click: function (e) {
    let d = new Date();
    let nowtime = d.getTime();
    if (nowtime - lasttime > clickTime) {
      lasttime = nowtime;
      switch (e.currentTarget.id) {

        case "click1":
          openSidebar() ;
        break;
        case "cancelList":
          closeSidebar() ;
          break;
          case "click2":
            openPopupContro() ;
          break;
          case "cancelPopup":
            closePopupContro();
            break;
            case "click3":
              previewUrgen(new notice(app.globalData.local["notice"],"#000000","#ffffff"));
            break;
            case "click4":
              previewNotice(new notice(app.globalData.local["notice"],"#000000","#ffffff"));
            break;
            case "exitPreviewUrgen":
              previewUrgenOn = false;
              this.clearAnimation('.preview_urgen_content_text', function () {})
              that.setData({
                previewUrgenDisplay: "hidden",
              })
              break;
            case "exitPreviewNotic":
              previewNoticeOn = false;
              this.clearAnimation('.preview_notic_content_text', function () {})
              that.setData({
                previewNoticeDisplay: "hidden",
              })
              break;

        case "language_1":
          if (app.globalData.lang != "zh") {
            wx.setStorageSync("lang", "zh")
            app.globalData.lang = "zh"
            app.globalData.local = localList.languages["zh"];
            that.setData({
                local: app.globalData.local,
                languageColor1: app.globalData.lang == "zh" ? "#e74b63" : "#aaaaaa",
                languageColor2: app.globalData.lang == "en" ? "#e74b63" : "#aaaaaa",
              
            })
           
          }
          break;
        
          case "language_2":
            if (app.globalData.lang != "en") {
              wx.setStorageSync("lang", "en")
              app.globalData.lang = "en"
             app.globalData.local = localList.languages["en"]
              that.setData({
                local: app.globalData.local,
                languageColor1: app.globalData.lang == "zh" ? "#e74b63" : "#aaaaaa",
                languageColor2: app.globalData.lang == "en" ? "#e74b63" : "#aaaaaa",
              
            })
            }
            break;
          
       
    
     
        
      }
    }
  },

  previewUrgenAnimationend: function (e) {
    console.log(e);
    console.log("动画结束")
    this.clearAnimation('.preview_urgen_content_text', function () {})
    if (previewUrgenOn) {
      previewUrgen(new notice(app.globalData.local["notice"],"#000000","#ffffff"));
    }
  },

  previewNoticAnimationend: function (e) {
    console.log(e);
    console.log("动画结束")
    this.clearAnimation('.preview_notic_content_text', function () {})
    if (previewNoticeOn) {
      previewNotice(new notice(app.globalData.local["notice"],"#000000","#ffffff"));
    }
  },
 
})



//打开侧边菜单
function openSidebar() {
  that.setData({
    sidebarDisplay: "visible",
  })
  that.animation = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease',
    delay: 0,
    transformOrigin: 'left top 0',
  })
  that.animation.translate(450 / ratio).step()
  that.setData({
    //输出动画
    animation: that.animation.export()
  })
  setTimeout(function () {}.bind(this), 500)
}

//关闭侧滑菜单
function closeSidebar() {
  //实例化一个动画
  that.animation = wx.createAnimation({
    // 动画持续时间，单位ms，默认值 400
    duration: 300,
    timingFunction: 'ease',
    // 延迟多长时间开始
    delay: 0,
    transformOrigin: 'left top 0',
  })
  that.animation.translate(0).step()
  that.setData({
    //输出动画
    animation: that.animation.export()
  })
  setTimeout(function () {
    that.setData({
      sidebarDisplay: "hidden",
    })

  }.bind(this), 300)
}


function openPopupContro() {
  var query = wx.createSelectorQuery()
  query.select('#popup_contro_content_1').boundingClientRect(function (res) {

    var screenH = res.height;
    that.setData({
      popupControlDisplay: "visible",
    })
    that.animation_contro = wx.createAnimation({
      duration: 300,
      timingFunction: 'ease',
      delay: 0,
      transformOrigin: 'left top 0',
    })
    that.animation_contro.translate(0, -screenH).step()
    that.setData({
      //输出动画
      animation_contro: that.animation_contro.export()
    })
    setTimeout(function () {}.bind(this), 300)

  }).exec();

}

function closePopupContro() {
  //实例化一个动画
  that.animation_contro = wx.createAnimation({
    // 动画持续时间，单位ms，默认值 400
    duration: 300,
    timingFunction: 'ease',
    // 延迟多长时间开始
    delay: 0,
    transformOrigin: 'left top 0',
  })
  that.animation_contro.translate(0, 0).step()
  that.setData({
    //输出动画
    animation_contro: that.animation_contro.export()
  })
  setTimeout(function () {
    that.setData({
      popupControlDisplay: "hidden",
    })

  }.bind(this), 300)
}


function previewUrgen(urgen) {
  previewUrgenOn = true;
  that.setData({
    urgenText: urgen.text,
    previewUrgenDisplay: "visible",
    previewUrgenText2Display: "hidden",
    urgenBg: urgen.bgColor,
    urgenTextColor: urgen.textColor,
  })


  var query = wx.createSelectorQuery()
  query.select('#preview_urgen_content_text').boundingClientRect(function (res) {

    var textH = res.height;
    console.log("textH:" + textH);
    console.log("textH/ratio:" + textH * ratio);
    if (textH * ratio > 251) {
      that.setData({
        previewUrgenText2Display: "visible",
      })
      var animationDuration = textH * ratio / 250 * 5000;

      that.animationPreviewUrgen = wx.createAnimation({
        duration: animationDuration,
        timingFunction: 'linear',
        delay: 0,
        transformOrigin: 'left top 0',
      })
      that.animationPreviewUrgen.translate(0, -textH).step()
      that.setData({
        //输出动画
        animationPreviewUrgen: that.animationPreviewUrgen.export()
      })
    }
  }).exec();

}

function previewNotice(notice) {
  previewNoticeOn = true;
  that.setData({
    noticeText: notice.text,
    previewNoticeDisplay: "visible",
    noticeBg: notice.bgColor,
    noticeTextColor: notice.textColor,
  })

  var query = wx.createSelectorQuery()
  query.select('#preview_notic_content_text').boundingClientRect(function (res) {

    var textW = res.width + 750 / ratio;

    console.log("textW:" + textW);
    console.log("textW/radio:" + textW * ratio);
    var animationDuration = textW * ratio / 750 * 5000;

    that.animationPreviewNotice = wx.createAnimation({
      duration: animationDuration,
      timingFunction: 'linear',
      delay: 0,
      transformOrigin: 'left top 0',
    })
    that.animationPreviewNotice.translate(-textW).step()
    that.setData({
      //输出动画
      animationPreviewNotice: that.animationPreviewNotice.export()
    })

  }).exec();

}

 

 

.bg_image {
  position: absolute;
  display: flex;
  height: 100%;
  width: 100%;
  background: #ffffff;
}

.titleBar_bg {
  position: absolute;
  width: 100%;
  background: #ffffff;
}

.titleBar {
  position: absolute;
  display: flex;
  height: 44px;
  margin-top: 20px;
  width: 100%;
  align-items: center;
}

.back_view {
  height: 28px;
  width: 28px;
  margin-left: 10px;
}

.back_img {
  height: 28px;
  width: 20px;
}

.title_text {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  padding-right: 38px;
  color: #333333;
  font-size: 1.2em;
}

.content_bg{
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #efefef;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
}

.scroll {
  position: absolute;
  width: 750rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
  background-color: #efefef;
  
}



.button{
  height: 90rpx;
width: 500rpx;
  margin-bottom: 30rpx;
 background: linear-gradient(to right, #cd3acb , #d16e34);
  display: flex;
justify-content:space-around;
 text-align: center;
 font-size: 32rpx;
  align-items: center;
 color:rgba(255, 255, 255, 1.0);
 border-radius: 45rpx;
}

.choose_language{
  position:absolute;
bottom: 30rpx;
font-size: 28rpx;
 width: 750rpx;
  display: flex;
  justify-content:center;
  align-items: center;
   height: 40rpx;
}

.language_1{
   width: 200rpx;
   height: 40rpx;
        display: flex;
justify-content:flex-end;
  text-align: center;
  font-size: 32rpx;
  align-items: center;
  color:#e74b63;
}
.language_2{
   width: 200rpx;
   height: 40rpx;
        display: flex;
justify-content:flex-start;
  text-align: center;
  font-size: 32rpx;
   align-items: center;
  color:#555555;
}

.language_3{
   width: 100rpx;
   height: 40rpx;
        display: flex;
justify-content:center;
  text-align: center;
  font-size: 32rpx;
   align-items: center;
  color:#555555;
}

.shu{
width: 2rpx;
   height: 40rpx;
   margin-left: 40rpx;
   margin-right: 40rpx;
   background: #aaaaaa;
}


.sidebar_bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);

}




.sidebar_content {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-start;
  height: 100%;
  margin-left: -450rpx;
  width: 450rpx;
  background: #eeeeee;
  z-index: 888;
}

.sidebar_content_scroll {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-start;
  height: 100%;
  width: 450rpx;
  background: #eeeeee;
  z-index: 888;
}



.sidebar_item{
  height: 100rpx;
  width: 400rpx;
  padding-left: 50rpx;
  border-top: 1px solid rgba(175, 173, 173, 0.2); 
  display: flex;
  justify-content: start;
  align-items: center;
}
.sidebar_item_img{
  height: 40rpx;
  width: 40rpx;
}
.sidebar_item_text{
  height: auto;
  width: 400rpx;
  margin-left: 20rpx;
  font-size: 1em;
  color: #333333;
}

.sidebar_exit{
  height: 70rpx;
  width: 360rpx;
  margin-left: 40rpx;
  border: 1px solid rgba(175, 173, 173, 0.6); 
  border-radius: 15rpx;
  display: flex;
  justify-content: center;
  align-items: center;

}



.popup_choose_bg{
  position: absolute;
  /* display: flex;
    justify-content: end;
    align-items:center;
    flex-direction: column-reverse; */
  height: 100%;
  width: 100%;
  background: rgba(100, 100, 100, 0.7);
  z-index: 9999;
}

.popup_choose_content{
  position: absolute;
  display: flex;
  justify-content: end;
  align-items:center;
  flex-direction: column-reverse;
height: auto;
width: 100%;
top: 100%;
}
.popup_choose_item_view{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.popup_choose_item_bg_exit{
  width: 700rpx;
  height: 100rpx;
  background: #ffffff;
  border-radius: 15rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
 
}

.popup_choose_item_bg_bottom{
  width: 700rpx;
  height: 100rpx;
  background: #ffffff;
  border-bottom-right-radius: 15rpx;
  border-bottom-left-radius: 15rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #576B95;
}
.popup_choose_item_bg_mid{
  width: 700rpx;
  height: 100rpx;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #576B95;
}
.popup_choose_item_bg_top{
  width: 700rpx;
  height: 100rpx;
  background: #ffffff;
  border-top-right-radius: 15rpx;
  border-top-left-radius: 15rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #576B95;
}
.popup_choose_item_splitLine {
  height: 1px;
  width: 700rpx;
  background:linear-gradient(to left,#ffffff,#dddddd,#ffffff);
}





.preview_urgen_bg{
  position: absolute;
  display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
  height: 100%;
  width: 100%;
  background: rgba(100, 100, 100, 0.7);
  z-index: 9999;
}

.preview_urgen_content_bg{
  height: 250rpx;
  width: 750rpx;
  background-color: black;
  overflow:hidden;
}


.preview_urgen_content_text{
  height: auto;
  width: 750rpx;
  min-height: 250rpx;
  color: wheat;
  display: flex;
  justify-content: center;
  align-items:center;
}

.exit_preview_urgen{
  height: 60rpx;
  width: 60rpx;
  margin-top: 50rpx;
}

.preview_notic_bg{
  position: absolute;
  display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
  height: 100%;
  width: 100%;
  background: rgba(100, 100, 100, 0.7);
  z-index: 9999;
}

.preview_notic_content_bg{
  height: 250rpx;
  width: 750rpx;
  background-color: rgb(102, 92, 92);
  display: flex;
    align-items:flex-end;
}

.preview_notic_content_text_bg{
  height: auto;
  width: auto;
  min-width: 100%;
  background-color: teal;
}

.preview_notic_content_text{
  height: auto;
  color: wheat;
  margin-left: 750rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  white-space: nowrap;
  display: inline-block;
}



.click_hover {
  opacity: 0.6;
}

 

 

 

<image class="bg_image" mode="aspectFill">
</image>

<view class='titleBar_bg' style='height:{{titleBarHeight+statusBarHeight}}px;'></view>

<view class='titleBar' style='height:{{titleBarHeight}}px; margin-top:{{statusBarHeight}}px;'>

	<view class='back_view' id='back' bindtap="backClick" hover-class="click_hover" hover-stay-time="100">
		<image class="back_img" src="../../images/back_2.png" mode="aspectFit" />
	</view>
	<text class="title_text">{{local.title}}</text>
</view>




<scroll-view class='scroll' style='top:{{titleBarHeight+statusBarHeight}}px; height:{{contentH}}px ' scroll-y>
<view class="content_bg" >
	<text class="button" id="click1" bindtap='click' hover-class="click_hover" hover-stay-time="100" >打开侧滑菜单</text>

	<text class="button" id="click2" bindtap='click' hover-class="click_hover" hover-stay-time="100">打开底部菜单</text>

	<text class="button" id="click3" bindtap='click' hover-class="click_hover" hover-stay-time="100">打开垂直多行滚动</text>

	<text class="button" id="click4" bindtap='click' hover-class="click_hover" hover-stay-time="100">打开水平单行滚动</text>

</view> 
		</scroll-view>





<!-- 侧边栏出现的遮挡BG -->
<view class="sidebar_bg" style="top:{{titleBarHeight+statusBarHeight}}px; visibility:{{sidebarDisplay}}"  id="cancelList" bindtap='click' >
</view>
<!-- 侧边抽屉 开始-->

<view  class="sidebar_content" style="top:{{titleBarHeight+statusBarHeight}}px; height:{{sidebarH}}" animation="{{animation}}">  

<scroll-view  scroll-y  class="sidebar_content_scroll" style="height:{{sidebarScrollH}}"> 

<text> 侧滑菜单</text>

</scroll-view>

<view  class="sidebar_exit" id="cancelList" bindtap='click' hover-class="click_hover" hover-stay-time="100" >取消</view>

</view>

<!-- 侧边抽屉 结束-->





<!-- popup start -->
<view class="popup_choose_bg"  style=" visibility:{{popupControlDisplay}}" > 

<view class="popup_choose_content" id="popup_contro_content_1" animation="{{animation_contro}}">  

<view class="popup_choose_item_bg_exit" >
<view class="popup_choose_item_view" id ="cancelPopup"  bindtap='click' hover-class="click_hover" hover-stay-time="100"> 取消 </view>
</view>

<view class="popup_choose_item_bg_bottom" >
<view class="popup_choose_item_view" id="cancelPopup" bindtap='click' hover-class="click_hover" hover-stay-time="100" style="color: #aa0000;"> 删除 </view>
</view>
<view class="popup_choose_item_splitLine"  />
<view class="popup_choose_item_bg_mid" >
<view class="popup_choose_item_view" id="cancelPopup" bindtap='click' hover-class="click_hover" hover-stay-time="100"> 选择3 </view>
</view>
<view class="popup_choose_item_splitLine"  />
<view class="popup_choose_item_bg_mid" >
<view class="popup_choose_item_view" id="cancelPopup" bindtap='click' hover-class="click_hover" hover-stay-time="100"> 选择2 </view>
</view>
<view class="popup_choose_item_splitLine"  />
<view class="popup_choose_item_bg_top"  >
<view class="popup_choose_item_view" id="cancelPopup" bindtap='click' hover-class="click_hover" hover-stay-time="100"> 这是选择1 </view>
</view>
</view>
</view>
<!-- popup end -->












<!-- 垂直滚动 start-->

<view class="preview_urgen_bg" style=" visibility:{{previewUrgenDisplay}}">
	<view class="preview_urgen_content_bg" style="background: {{urgenBg}};">
		<view class="preview_urgen_content_text" id="preview_urgen_content_text" style="color: {{urgenTextColor}};" bindtransitionend='previewUrgenAnimationend' animation="{{animationPreviewUrgen}}">{{urgenText}}</view>

		<view class="preview_urgen_content_text" style=" visibility:{{previewUrgenText2Display}}" style="color: {{urgenTextColor}};" id="preview_urgen_content_text" animation="{{animationPreviewUrgen}}">
			<!-- bindtransitionend='previewUrgenAnimationend' -->
			{{urgenText}}</view>
	</view>

	<view class="exit_preview_urgen" id="exitPreviewUrgen" bindtap='click' hover-class="click_hover" hover-stay-time="100">
		<image class="exit_preview_urgen" src="../../images/exit.png" mode="aspectFit" />
	</view>

</view>

<!-- 垂直滚动 end-->



<!-- 水平滚动 start-->

<view class="preview_notic_bg" style=" visibility:{{previewNoticeDisplay}}">
	<view class="preview_notic_content_bg">

		<view class="preview_notic_content_text_bg" style="background: {{noticeBg}};">
			<view class="preview_notic_content_text" id="preview_notic_content_text" style="color: {{noticeTextColor}};" bindtransitionend='previewNoticAnimationend' animation="{{animationPreviewNotice}}">{{noticeText}}</view>
		</view>
	</view>

	<view class="exit_preview_urgen" id="exitPreviewNotic" bindtap='click' hover-class="click_hover" hover-stay-time="100">
		<image class="exit_preview_urgen" src="../../images/exit.png" mode="aspectFit" />
	</view>

</view>

<!-- 水平滚动 end-->



<view class='choose_language'>  
<view class='language_1'style='color:{{languageColor1}}' id='language_1' bindtap="click" hover-class="click_hover" hover-stay-time="100">中文</view>
<!-- <view class='shu'/>  
<view class='language_3'style='color:{{languageColor2}}' id='language_2' bindtap="click" hover-class="click_hover" hover-stay-time="100">한글</view> -->
<view class='shu'/>  
<view class='language_2'style='color:{{languageColor2}}' id='language_2' bindtap="click" hover-class="click_hover" hover-stay-time="100">English</view>
 </view>