微信小程序自定义标题栏、语言切换、侧边抽屉菜单栏、底部菜单栏动画，多行文本垂直滚动，单行文本水平滚动
下载地址 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;
}
{{local.title}}
打开侧滑菜单
打开底部菜单
打开垂直多行滚动
打开水平单行滚动
侧滑菜单
取消
取消
删除
选择3
选择2
这是选择1
{{urgenText}}
{{urgenText}}
{{noticeText}}
中文
English