zoukankan      html  css  js  c++  java
  • 移动端问题小计

    css文字超出滚动

    • html
    <div class="box">
        <p class="animate">
            君不见黄河之水天上来,奔流到海不复回,君不见高堂明镜悲白发,朝如青丝暮成雪,人生得意须尽欢,莫使金樽空对月
        </p>
    </div>
    
    • css
            .box {
                 300px;
                margin: 0 auto;
                position: relative;
                border: 1px solid #ff6700;
            }
    
            .animate {
                padding-left: 20px;
                font-size: 12px;
                color: #000;
    			display:inline-block;
                white-space: nowrap;
                animation: 5s wordsLoop linear infinite forwards;
            }
    
            @keyframes wordsLoop {
                0% {
                    transform: translateX(0px);
                  
                }
                100% {
    			/* translateX的值可根据实际情况调节*/
                    transform: translateX(calc(-100% + 280px));
                
                }
            }
    

    移动端超出滚动scroll组件实现

    • html
        <div id="out">
            <div class="inner">1</div>
            <div class="inner">2</div>
            <div class="inner">3</div>
            <div class="inner">4</div>
            <div class="inner">5</div>
        </div>
    
    • css
            #out {
                 300px;
                height: 150px;
                padding:10px 0;
                border:1px solid red;
                overflow-x: scroll;
                display: -webkit-box;
                /*兼容ios允许独立的滚动区域和触摸回弹*/
                -webkit-overflow-scrolling: touch;
            }
            #out::-webkit-scrollbar {
                /* 隐藏滚动条 */
                display: none;
            }
            .inner{
                 200px;
                height: 100%;
                margin-right: 10px;
                color: #fff;
                font-size: 80px;
                background: hotpink;
                text-align: center;
                line-height: 150px;
            }
    
    • 使用js赋予初始滑动距离
        var box = document.getElementById('out');
    	//scrollTo的具体用法及传参请查看mdn文档
        box.scrollTo({
            left: 100,
            top: 0,
            behavior: 'smooth'//ios中设置behavior无效,具体版本请查看mdn
        })
    

    关于video标签在iso和安卓中的兼容处理

    相关链接:HTML5的Video标签的属性,方法和事件汇总

    webkit-playsinline和 playsinline可以防止ios中视频播放时自动全屏

    <template>
          <video
            id="video"
            width="100%"
            height="100%"
            :src="videoUrl"
            :poster="poster"//封面图
            :autoplay="autoplay"
            webkit-playsinline
            playsinline
            controls
            preload
            controlslist="nodownload" //禁止播放控件的下载功能
            oncontextmenu="return false">
            <source :src="videoUrl" />
          </video>
    </template>
    
    • 在安卓apk的webview中,video的api播放方法(document.getElementById('video').play())不能主动触发,只能用户交互(元素的click,touch事件)后触发有效

    vue单页面应用在ios中返回白屏

    • 问题描述:

        进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决
      
    • 原因分析

        在ios机器上使用webview开发Vue项目时候,go history(-1), 无法将body的高度拉掉,使得遮住,触发轻点击,方可消除遮罩
      
    • 解决方案实现原理:
      html,body都是100%,#app撑起了父元素的告诉,但是浏览器默认的滚动scroll并不是#app,而是body,某些因素,造成返回history 后,无法复原(ios 的锅),为此,我们将#app 进行了绝对定位,并让它重新成为 scroll 的对象,从而解决问题

    • 代码实现

            html,body {
                 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                position: relative;
            }
    
            #app {
                 100%;
                height: 100%;
                background: #fff;
                overflow: scroll;
                -webkit-overflow-scrolling: touch;
                position: absolute;
                left: 0;
                top: 0;
            }
    

    webview中使用H5调用微信支付返回问题

    • 问题描述
      A页面-->微信支付页面-->支付成功redirect_url指定的页面--->按返回键-->再次进入微信支付页面(bug)--->返回进入A页面

      在跳转微信支付地址时,如果加入redirect_url返回地址,则回退的时候会再次经过支付地址页面,如要解决,请不要增加rediect_url

  • 相关阅读:
    LeetCode 42. Trapping Rain Water
    LeetCode 209. Minimum Size Subarray Sum
    LeetCode 50. Pow(x, n)
    LeetCode 80. Remove Duplicates from Sorted Array II
    Window10 激活
    Premiere 关键帧缩放
    AE 「酷酷的藤」特效字幕制作方法
    51Talk第一天 培训系列1
    Premiere 视频转场
    Premiere 暴徒生活Thug Life
  • 原文地址:https://www.cnblogs.com/jerrypig/p/11512656.html
Copyright © 2011-2022 走看看