要将Muiios标题栏上移,首先需要在编辑器中找到标题栏的CSS代码,然后将其移动到网页布局中的想要的位置上。可以通过修改顶部margin属性的值来实现标题栏的上移,只需要将margin属性的值设置为负数即可,比如margin-top:-50px这样就可以将标题栏上移50像素。
另外,还可以通过调整标题栏的位置属性来上移标题栏。这里的位置属性一般有absolute和relative两种,如果想要标题栏上移,可以将其位置属性设置为relative,同时设置top属性的值为负数即可,比如top:-50px。
总之,通过修改CSS代码,就可以实现Muiios标题栏的上移。要记住,在修改CSS代码时,一定要谨慎 *** 作,以免破坏网站的布局,影响网站的整体效果。
上一个版本比较简陋,可以避免了window.innerHeight <document.body.clientHeight 的情况,but再去判断该高度并选择是否使用本功能是很不友好的事情,因此就将列表下拉的功能也放进来了,并且添加了双击头部或单击头部标题,返回到最顶部的功能。var huitan = (function() {
var ht = {}
ht.init = function(dom) {
if (!support_touch_event()) return
var startX, startY, endX, endY, cou,
a = window.innerHeight,
b = document.body.clientHeight,
c = b - a,
d,
f = 0,
isUp = false,
isdownAfterUp = false,
container = dom || document.querySelector(".mui-content")
container.addEventListener('touchstart', function(e) {
e.preventDefault()//阻止触摸时浏览器的缩放、滚动条滚动等
var touch = e.touches[0]//获取第一个触点
var x = touch.pageX//页面触点X坐标
var y = touch.pageY//页面触点Y坐标
//记录触点初始位置
startX = x
startY = y
cou = 0
})
container.addEventListener('touchmove', function(e) {
e.preventDefault()//阻止触摸时浏览器的缩放、滚动条滚动等
var touch = e.touches[0]//获取第一个触点
var x = touch.pageX//页面触点X坐标
var y = touch.pageY//页面触点Y坐标
endX = x
endY = y
d = Math.abs(y - startY)
if (++cou == 2) {
if (endY <startY) {
//上拉
isUp = true
} else {
if (isUp) {
isdownAfterUp = true
isUp = false
//console.log("isdownAfterUp")
}
}
}
if (d >50 &&d <180) {
//低版本安卓机拉伸有抖动现象,通过减少动画次数来规避
if ( /*mui.os.android &&*/ cou % 5 == 0) {
if (isUp) {
f += -d
} else {
if (isdownAfterUp) {
//下拉后上拉
f = d - Math.abs(f)
} else {
//刚开始就下拉
f = d
}
}
//console.log("moved:" + d)
//console.log("movef:" + f)
container.style.transition = "all 1s cubic-bezier(.1, .57, .1, 1)"
container.style.webkitTransition = "all 1s cubic-bezier(.1, .57, .1, 1)"
container.style.transform = "translate(0px, " + f + "px) translateZ(0px)"
container.style.webkitTransform = "translate(0px, " + f + "px) translateZ(0px)"
}
}
})
container.addEventListener('touchend', touchend)
container.addEventListener('touchcancel', touchend)
function touchend(e) {
e.preventDefault()
var ani = true
if (isUp) {
if (Math.abs(f) >c &&c >0) {
f = -c//偏移高度>窗口隐藏高度
} else {
ani = false
}
} else {
if (isdownAfterUp) {
f >0 ? f = 0 : null
} else {
f = 0
}
}
//console.log("f:" + f)
if (ani) {
container.style.transition = "all 300ms cubic-bezier(.1, .57, .1, 1)"
container.style.webkitTransition = "all 300ms cubic-bezier(.1, .57, .1, 1)"
container.style.transform = "translate(0px," + f + "px) translateZ(0px)"
container.style.webkitTransform = "translate(0px," + f + "px) translateZ(0px)"
}
}
function support_touch_event() {
return !!(('ontouchstart' in window) || window.DocumentTouch &&document instanceof DocumentTouch)
}
//双击回到顶部
document.querySelector('header').addEventListener('doubletap', toTop)
//单击回到顶部
document.querySelector(".mui-title").addEventListener('tap', toTop)
function toTop() {
var mf = Math.abs(f)
var tm = mf / 300 >5 ? mf / 300 - 5 : 1
tm *= 300//防止白屏
container.style.transition = "all " + tm + "ms cubic-bezier(.1, .57, .1, 1)"
container.style.webkitTransition = "all " + tm + "ms cubic-bezier(.1, .57, .1, 1)"
container.style.transform = "translate(0px,0px) translateZ(0px)"
container.style.webkitTransform = "translate(0px,0px) translateZ(0px)"
}
}
return ht
}())
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)