精华内容
下载资源
问答
  • 微信小程序页面上下滚动

    万次阅读 多人点赞 2019-06-21 16:24:21
    开发交流QQ群:173683895 173683895 526474645 人满的请加其它群 看图 源码 <view class="container container-fill">...view class="scroll-fullpage" bindtouchstart="scrollTouchstart" bindtouchmove=...

    开发交流QQ群:  173683895   173683895   526474645  人满的请加其它群

    看图

    源码

    <view class="container container-fill">
    	<view class="scroll-fullpage" bindtouchstart="scrollTouchstart" bindtouchmove="scrollTouchmove" bindtouchend="scrollTouchend" style="transform:translateY(-{{scrollindex*100}}%);margin-top: {{margintop}}px">
    		<view class="section section01 {{scrollindex==0?'active':''}}" style="background: #3399FF;">
    			<text class="section-maintitle">页面1</text>
    			<text class="section-subtitle">我的页面”1</text>
    		</view>
    		<view class="section section02 {{scrollindex==1?'active':''}}" style="background: #00CC66;">
    			<text class="section-maintitle">页面2</text>
    			<text class="section-subtitle">我的页面”2</text>
    		</view>
    		<view class="section section03 {{scrollindex==2?'active':''}}" style="background: #33CCCC;">
    			<text class="section-maintitle">页面3</text>
    			<text class="section-subtitle">我的页面”3</text>
    		</view>
    		<view class="section section04 {{scrollindex==3?'active':''}}" style="background: #6699FF;">
    			<text class="section-maintitle">页面4</text>
    			<text class="section-subtitle">我的页面”4</text>
    		</view>
    		<view class="section section05 {{scrollindex==4?'active':''}}" style="background: #9966FF;">
    			<text class="section-maintitle">无缝对接双创服5</text>
    			<text class="section-subtitle">我的页面”5</text>
    		</view>
    	</view>
    </view>

    js

    Page({
      data: {
        scrollindex:0,  //当前页面的索引值
        totalnum:5,  //总共页面数
        starty:0,  //开始的位置x
        endy:0, //结束的位置y
        critical: 100, //触发翻页的临界值
        margintop:0,  //滑动下拉距离
      },
      onLoad: function () {
      },
      scrollTouchstart:function(e){
        let py = e.touches[0].pageY;
        this.setData({
          starty: py
        })
      },
      scrollTouchmove:function(e){
        let py = e.touches[0].pageY;
        let d = this.data;
        this.setData({
          endy: py,
        })
        if(py-d.starty<100 && py-d.starty>-100){    
          this.setData({
            margintop: py - d.starty
          })
        }
      },
      scrollTouchend:function(e){
        let d = this.data;
        if(d.endy-d.starty >100 && d.scrollindex>0){
          this.setData({
            scrollindex: d.scrollindex-1
          })
        }else if(d.endy-d.starty <-100 && d.scrollindex<this.data.totalnum-1){
          this.setData({
            scrollindex: d.scrollindex+1
          })
        }
        this.setData({
            starty:0,
            endy:0,
            margintop:0
        })
      },
    })
    

    css

    .container-fill{
    	height: 100%;
    	overflow: hidden;
    }
    .scroll-fullpage{
    	height: 100%;
    	transition: all 0.3s;
    }
    .section{
    	height: 100%;
    }
    .section-maintitle{
    	display: block;
    	text-align: center;
    	font-size: 50rpx;
    	color: #fff;
    	font-weight: bold;
    	letter-spacing: 10rpx;
    	padding-top: 140rpx;
    }
    .section-subtitle{
    	display: block;
    	text-align: center;
    	font-size: 40rpx;
    	color: #fff;
    	font-weight: bold;
    	letter-spacing: 10rpx;
    }
    .active .section-maintitle,
    .active .section-subtitle{
    	animation: mymove 0.8s;
    }
    @keyframes mymove{
    	from {
    		transform: translateY(-400rpx) scale(0.5) rotateY(90deg);
    	}
    	to {
    		transform: translateY(0) scale(1) rotateY(0);
    	}
    }
    

     

    展开全文
  • 我一开始以为是拉/下拉刷新没关,但后面试了很多方法都没用,查看官方文档的时候很诡异,在app-plus有一个回弹属性,将它改为false,页面就OK了! 代码 "pages": [ //pages数组中第一项表示应用启动 { ...

    这个问题很烦,因为上下拉的时候会出现空白页,很难看!我一开始以为是上拉/下拉刷新没关,但后面试了很多方法都没用,查看官方文档的时候很诡异,在app-plus下有一个回弹属性,将它改为false,页面就OK了!

    上代码

    	"pages": [ //pages数组中第一项表示应用启动页
    		{
    			"path": "pages/login/login",
    			"style": {
    				"navigationBarTitleText": "uni-app",
    				"app-plus":{
    					// 将回弹属性关掉
    					"bounce":"none"
    				}
    			}
    		}
        ]
    
    展开全文
  • 移动端H5页面,上下滑动翻页

    万次阅读 多人点赞 2017-09-26 15:10:02
    滑动进入前一 , 当前(加CSS样式outDown)向移动移出窗口 ,下一页(加CSS样式inDown)向移动进入窗口 同时设置1秒以后(setTimeout(function(){......},1000);)才可(根据canT...

    移动端H5页面,上下滑动翻页
    向上滑动进入下一页 , 当前页(加CSS样式outTop)向上移动移出窗口 ,下一页(加CSS样式inTop)向上移动进入窗口
    向下滑动进入前一页 , 当前页(加CSS样式outDown)向下移动移出窗口 ,下一页(加CSS样式inDown)向下移动进入窗口
    同时设置1秒以后(setTimeout(function(){......},1000);)才可(根据canTouch变量设置)切换页面

    以下是demo的HTML代码部分

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=640, user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-title" content="">
    <title>H5-test</title>
    <link href="css.css" rel="stylesheet" />
    </head>
    
    <body>
    
    <div class="page_box">
        <div class="page page1">
            <div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
            </div>
        </div>
        
        <div class="page page2 hide">
            <div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
            </div>
        </div>
        
        <div class="page page3 hide">
            <div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
            </div>
        </div>
        
        <div class="page page4 hide">
            <div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
            </div>
        </div>
        
        <div class="page page5 hide">
            <div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
            </div>
        </div>
        
        <div class="page page6 hide">
            <div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
            </div>
        </div>
    </div>
    
    <div class="arrow">∧</div>
    
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
    
    //$('.page').height($(window).height());
    
    document.addEventListener("touchmove", function(e){
    	e.preventDefault();
    } , false);
    
    var curPage = 1;
    var PageL = $('.page_box .page').length;
    var canTouch = false;
    canTouch = true;
    
    var startY , endY , diff;
    document.body.addEventListener("touchstart", touchStart, false);
    document.body.addEventListener("touchmove", touchMove, false);
    document.body.addEventListener("touchend", touchEnd, false);
    function touchStart(e){
    	var touch = e.touches[0];
    	startY = touch.pageY;
    }  
    function touchMove(e){
    	//e.preventDefault();
    	var touch = e.touches[0];
    	endY = touch.pageY;
    	diff = endY - startY;
    }
    function touchEnd(e){
    	if(Math.abs(diff) > 150 && canTouch){
    		if(diff > 0){
    			if(curPage <= 1){
    				return;
    			}
    			
    			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outDown');
    			curPage--;
    			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inDown');
    			
    		}else{
    			if(curPage >= PageL){
    				return;
    			}
    			
    			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outTop');
    			curPage++;
    			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inTop');
    			
    			if(curPage >= PageL){
    				$('.arrow').hide();
    			}else{
    				$('.arrow').show();
    			}
    		}
    		canTouch = false;
    		setTimeout(function(){
    			canTouch = true;
    			diff = 0;
    			$('.page' + (curPage - 1) + ', .page' + (curPage + 1)).addClass('hide');
    		},1000);
    	}
    }
    </script>
    </body>
    </html>
    


    以下是demo的CSS样式部分

    @charset "utf-8";
    *{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
    html{ max-width:640px; margin:0 auto;}
    body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:50px; line-height:1.5em; color:#212121;
        -webkit-user-select:none; user-select:none;
        -webkit-touch-callout:none; touch-callout:none;
    }
    html , body , .page_box{ width:100%; height:100%; position:relative; overflow:hidden;}
    .page{ background:url(data:image/jpg;base64,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) repeat-y; background-size:100%;}
    .page{ display:flex; justify-content:center; align-items:center; width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden;}
    .page.hide{ display:none;}
    
    /*==================================*/
    
    .page.inTop{
                -webkit-animation:ShowTop .5s ease-out both;
    					animation:ShowTop .5s ease-out both;
    }
    .page.outTop{
                -webkit-animation:HideTop .5s ease-out both;
    					animation:HideTop .5s ease-out both;
    }
    .page.inDown{
                -webkit-animation:ShowDown .5s ease-out both;
    					animation:ShowDown .5s ease-out both;
    }
    .page.outDown{
                -webkit-animation:HideDown .5s ease-out both;
    					animation:HideDown .5s ease-out both;
    }
    @-webkit-keyframes ShowTop{
    	0%{ -webkit-transform:translateY(100%);}
    	100%{ -webkit-transform:translateY(0);}
    }
    @keyframes ShowTop{
    	0%{ transform:translateY(100%);}
    	100%{ transform:translateY(0);}
    }
    @-webkit-keyframes HideTop{
    	0%{ -webkit-transform:translateY(0);}
    	100%{ -webkit-transform:translateY(-100%);}
    }
    @keyframes HideTop{
    	0%{ transform:translateY(0);}
    	100%{ transform:translateY(-100%);}
    }
    @-webkit-keyframes ShowDown{
    	0%{ -webkit-transform:translateY(-100%);}
    	100%{ -webkit-transform:translateY(0);}
    }
    @keyframes ShowDown{
    	0%{ transform:translateY(-100%);}
    	100%{ transform:translateY(0);}
    }
    @-webkit-keyframes HideDown{
    	0%{ -webkit-transform:translateY(0);}
    	100%{ -webkit-transform:translateY(100%);}
    }
    @keyframes HideDown{
    	0%{ transform:translateY(0);}
    	100%{ transform:translateY(100%);}
    }
    
    /*==================================*/
    
    .arrow{ width:70px; height:56px; line-height:56px; text-align:center; font-size:50px; font-weight:bold; color:#d00; position:absolute; left:285px; bottom:10px;
    			-webkit-animation:arrow 1.2s .5s ease-in-out infinite;
    					animation:arrow 1.2s .5s ease-in-out infinite;
    }
    @-webkit-keyframes arrow{
    	0%{ -webkit-transform:translateY(0); opacity:1;}
    	100%{ -webkit-transform:translateY(-50%); opacity:0}
    }
    @keyframes arrow{
    	0%{ transform:translateY(0); opacity:1;}
    	100%{ transform:translateY(-50%); opacity:0}
    }
    
    
    /*==================================*/
    
    .page > div > div:nth-child(1){
    	-webkit-animation:fadeRightTan .8s .2s ease-in-out both;
    			animation:fadeRightTan .8s .2s ease-in-out both;
    }
    .page > div > div:nth-child(2){
    	-webkit-animation:fadeRightTan .8s .7s ease-in-out both;
    			animation:fadeRightTan .8s .7s ease-in-out both;
    }
    .page > div > div:nth-child(3){
    	-webkit-animation:fadeRightTan .8s 1.2s ease-in-out both;
    			animation:fadeRightTan .8s 1.2s ease-in-out both;
    }
    .page > div > div:nth-child(4){
    	-webkit-animation:fadeRightTan .8s 1.7s ease-in-out both;
    			animation:fadeRightTan .8s 1.7s ease-in-out both;
    }
    .page > div > div:nth-child(5){
    	-webkit-animation:fadeRightTan .8s 2.2s ease-in-out both;
    			animation:fadeRightTan .8s 2.2s ease-in-out both;
    }
    .page > div > div:nth-child(6){
    	-webkit-animation:fadeRightTan .8s 2.7s ease-in-out both;
    			animation:fadeRightTan .8s 2.7s ease-in-out both;
    }
    .page > div > div:nth-child(7){
    	-webkit-animation:fadeRightTan .8s 3.2s ease-in-out both;
    			animation:fadeRightTan .8s 3.2s ease-in-out both;
    }
    .page > div > div:nth-child(8){
    	-webkit-animation:fadeRightTan .8s 4.7s ease-in-out both;
    			animation:fadeRightTan .8s 4.7s ease-in-out both;
    }
    .page > div > div:nth-child(9){
    	-webkit-animation:fadeRightTan .8s 5.2s ease-in-out both;
    			animation:fadeRightTan .8s 5.2s ease-in-out both;
    }
    .page > div > div:nth-child(10){
    	-webkit-animation:fadeRightTan .8s 5.7s ease-in-out both;
    			animation:fadeRightTan .8s 5.7s ease-in-out both;
    }
    @-webkit-keyframes fadeRightTan{
    	0%{ -webkit-transform:translateX(100%); opacity:0;}
    	70%{ -webkit-transform:translateX(-5%); opacity:1;}
    	80%{ -webkit-transform:translateX(2%); opacity:1;}
    	90%{ -webkit-transform:translateX(-2%); opacity:1;}
    	100%{ -webkit-transform:translateX(0); opacity:1;}
    }
    @keyframes fadeRightTan{
    	0%{ transform:translateX(100%); opacity:0;}
    	70%{ transform:translateX(-5%); opacity:1;}
    	80%{ transform:translateX(2%); opacity:1;}
    	90%{ transform:translateX(-2%); opacity:1;}
    	100%{ transform:translateX(0); opacity:1;}
    }
    

    eg : 切换作用域改在 page_box 盒子上,那么不需要放在翻页的内容可以入在 page_box 外面
    另外 : 当翻页中单页面内有行内滚动可以如下设置
    demo如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=640, user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-title" content="">
    <title>H5-test</title>
    <style>
    *{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
    html{ max-width:640px; margin:0 auto;}
    body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:50px; line-height:1.5em; color:#212121;
        -webkit-user-select:none; user-select:none;
        -webkit-touch-callout:none; touch-callout:none;
    }
    html , body , .page_box{ width:100%; height:100%; position:relative; overflow:hidden;}
    .page{ background-color:#eee;}
    .page{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden;}
    .page.hide{ display:none;}
     
    /*==================================*/
     
    .page.inTop{
                -webkit-animation:ShowTop .5s ease-out both;
    					animation:ShowTop .5s ease-out both;
    }
    .page.outTop{
                -webkit-animation:HideTop .5s ease-out both;
    					animation:HideTop .5s ease-out both;
    }
    .page.inDown{
                -webkit-animation:ShowDown .5s ease-out both;
    					animation:ShowDown .5s ease-out both;
    }
    .page.outDown{
                -webkit-animation:HideDown .5s ease-out both;
    					animation:HideDown .5s ease-out both;
    }
    @-webkit-keyframes ShowTop{
    	0%{ -webkit-transform:translateY(100%);}
    	100%{ -webkit-transform:translateY(0);}
    }
    @keyframes ShowTop{
    	0%{ transform:translateY(100%);}
    	100%{ transform:translateY(0);}
    }
    @-webkit-keyframes HideTop{
    	0%{ -webkit-transform:translateY(0);}
    	100%{ -webkit-transform:translateY(-100%);}
    }
    @keyframes HideTop{
    	0%{ transform:translateY(0);}
    	100%{ transform:translateY(-100%);}
    }
    @-webkit-keyframes ShowDown{
    	0%{ -webkit-transform:translateY(-100%);}
    	100%{ -webkit-transform:translateY(0);}
    }
    @keyframes ShowDown{
    	0%{ transform:translateY(-100%);}
    	100%{ transform:translateY(0);}
    }
    @-webkit-keyframes HideDown{
    	0%{ -webkit-transform:translateY(0);}
    	100%{ -webkit-transform:translateY(100%);}
    }
    @keyframes HideDown{
    	0%{ transform:translateY(0);}
    	100%{ transform:translateY(100%);}
    }
     
    /*==================================*/
     
    .arrow{ width:70px; height:56px; line-height:56px; text-align:center; font-size:50px; font-weight:bold; color:#d00; position:absolute; left:285px; bottom:10px;
    			-webkit-animation:arrow 1.2s .5s ease-in-out infinite;
    					animation:arrow 1.2s .5s ease-in-out infinite;
    }
    @-webkit-keyframes arrow{
    	0%{ -webkit-transform:translateY(0); opacity:1;}
    	100%{ -webkit-transform:translateY(-50%); opacity:0}
    }
    @keyframes arrow{
    	0%{ transform:translateY(0); opacity:1;}
    	100%{ transform:translateY(-50%); opacity:0}
    }
    </style>
    </head>
     
    <body>
     
    <div class="page_box">
        <div class="page page1">
        	<div style="width:80%; height:100px; line-height:100px;">标题标题标题标题</div>
            <div id="inbox" style="width:80%; height:60%; overflow-y:auto; -webkit-overflow-scrolling:touch;">
                <p>行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容</p>
            </div>
        </div>
        
        <div class="page page2 hide">
            <div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
            </div>
        </div>
        
        <div class="page page3 hide">
            <div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
            </div>
        </div>
        
    </div>
     
    <div class="arrow">∧</div>
     
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
    var curPage = 1;
    var PageL = $('.page_box .page').length;
    var canTouch = false;
    canTouch = true;
     
    var startY , endY , diff;
    //document.body.addEventListener("touchstart", touchStart, false);
    //document.body.addEventListener("touchmove", touchMove, false);
    //document.body.addEventListener("touchend", touchEnd, false);
    $('.page_box').on('touchstart',touchStart);
    $('.page_box').on('touchmove',touchMove);
    $('.page_box').on('touchend',touchEnd);
    function touchStart(e){
    //	var touch = e.touches[0];
    	var touch = e.originalEvent.targetTouches[0];
    	startY = touch.pageY;
    }  
    function touchMove(e){
    	e.preventDefault();
    //	var touch = e.touches[0];
    	var touch = e.originalEvent.targetTouches[0];
    	endY = touch.pageY;
    	diff = endY - startY;
    }
    function touchEnd(e){
    	if(Math.abs(diff) > 150 && canTouch){
    		if(diff > 0){
    			if(curPage <= 1){
    				return;
    			}
    			
    			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outDown');
    			curPage--;
    			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inDown');
    			
    		}else{
    			if(curPage >= PageL){
    				return;
    			}
    			
    			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outTop');
    			curPage++;
    			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inTop');
    			
    		}
    		if(curPage >= PageL){
    			$('.arrow').hide();
    		}else{
    			$('.arrow').show();
    		}
    		
    		canTouch = false;
    		setTimeout(function(){
    			canTouch = true;
    			diff = 0;
    			$('.page' + (curPage - 1) + ', .page' + (curPage + 1)).addClass('hide');
    		},500);
    	}
    }
    
    /
    
    //设置可行内滚动
    $('#inbox').on('touchstart',function(e){
    	e.stopPropagation();
    	//document.body.removeEventListener("touchmove", touchMove, false);
    	$('.page_box').unbind('touchmove');
    });
    $('#inbox').on('touchend',function(e){
    	$('.page_box').on('touchmove',touchMove);
    	//document.body.addEventListener("touchmove", touchMove, false);
    });
    </script>
    </body>
    </html>
    

     

    展开全文
  • 最近,做了一个项目,需要在手机端用H5写一个程序模仿苹果手机原生的左右菜单,如图: 简单实现了功能后,发现手机端运行时会遇到一个问题,当我手指进行左右滑动菜单时,除非手指水平滑动,否则会造成屏幕上下...

    最近,做了一个项目,需要在手机端用H5写一个程序模仿苹果手机原生的左右菜单,如下图:

    简单实现了功能后,发现手机端运行时会遇到一个问题,当我手指进行左右滑动菜单时,除非手指水平滑动,否则会造成屏幕上下滑动。仔细研究后,发现是由于手指不能保证水平滑动,因此在滑动时,会有一定的误差,导致屏幕认为手指进行了上下滑动的操作。因此解决办法如下:

    1)在touchstart处,记录targetTouches.clientX,targetTouches.clientY,也就是手指开始时的坐标(x1,y1)

    2)在touchmove处,同样记录targetTouches.clientX,targetTouches.clientY,也就是手指移动时的坐标(x2,y2)

    3)通过start和move记录的坐标,计算手指移动的角度,可以通过计算cos,sin值来判断角度大小。

    4)通过角度大小来控制父类的overflow-y的属性是否hidden。

    这里举例说明下:

    假设起始位置的坐标为(2,3),移动后的坐标为(1,1),如下图:

    此时,通过简单计算可得出,x = 1,y = 2,z = √5

    sin a = y/z = 2/ √5,

    假设你定义手指滑动角度必须大于等于30°就判定为垂直上下滑动,小于30°则判断为非垂直上下滑动,

    那么条件就是(sin 30° = 1/2)

    if (sin a >= 1/2){

         可以上下滑动

    }else{

         禁止上下滑动

    }

    另外,还有一点需要注意:由于手机端手指滑动的角度是从0°~360°,而sin曲线在0°~180°为正值,180°~360°为负值,因此在计算的时候,需要为x,y取绝对值,即x = |x1 - x2| ,y = |y1 - y2| 

    最后附上自己简单写的一个左右拉动代码,欢迎查看:

    https://github.com/chaoyidaozhan/swipeLeft

    展开全文
  • 做的是类似于淘宝商品详情的翻页,tableview和webview的大小位置正常,引用MJFeresh实现拉加载,下拉刷新,跪求大神帮助,要看代码的话,加扣,1739002833,谢啦……
  • 如图,ios,之前焦点和光标都是在input的,滑动页面时,光标会始终保持在那个位置,导致光标移出了input,但焦点还在input。 继续输入内容,光标又会回到input。 图光标在mm之间,只是页面刚好滚动到了这...
  • html怎么实现和pc端overflow-y:scroll一样的效果呢。我在页面直接加上这个overflow-y:scroll,在谷歌浏览器用手机模拟器运行,用鼠标滚轮可以实现滚动,但是触摸无效
  • iPhone 禁止 Safari 页面上下拖动反弹

    万次阅读 2016-08-22 18:33:57
    在web app应用状态条(屏幕顶部条)的颜色; 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。 注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方 (会覆盖...
  • js监听html页面的上下滚动事件

    万次阅读 2017-06-28 14:24:05
    最近在一个项目中,在写前端页面的时候,想像以前做Android时在页面时刻监听上下滚动的事件,查找资料发现由鼠标或类似用户动作触发的事件有以下图示:不多说了,直接代码了,经过测试可以使用:<!DOCTYPE html> ...
  • 滑动进入下一页 , 当前从 scale=1 放大至 比1的大倍数 ,并且透明度降低至0 ,下一页从 scale=0.1 放大至 scale=1 , 透明度无变化 下滑动进入前一 , 当前从 scale=1 缩小至 scale=0.1 ,透明度无变化 ,...
  • 在报表上打印"承上页""启下页

    千次阅读 2007-08-16 15:20:00
    打印帐册的时候一般要在页尾打上“启下页”或者“转下页”, 在页首打上“承上页”或“承前页”,实现步骤如下:1.先建立兩個公式字段:GoDown :if TotalPageCount=1 THEN Falseelse if PageNumber=...
  • 最近接外包,项目遇到个问题,客户做了两界面,我开始没找到合适的方法将两内容很好的显示出来,就在第一加了一个按钮然后跳转到第二来显示,但是这样其实效果不是很好。纠结了一会然后想到了ScrollView...
  • 全屏页面往滚动切换页面

    千次阅读 2016-09-19 17:56:27
    防止多次滚动事件发生/*每次滚动鼠标时都是很“凶残”的一子滚动很大一个幅度,而不是一小格一小格的慢慢滚动,这就导致了滚动的时候会多次触发onmousewheel事件,*/ var done = true;/*重要必须有的。。做个...
  • 为了实现页面之间的通讯,或者数据交换,我们要实现一个页面到另一个页面的传参,可以通过点击跳转的时候进行页面之间的传值。 <template> <view> ...navigator url="../a/a?id=1" hover-class="none"&...
  • 当在mui.min.css中加入* { touch-action: none; }这行代码后,会惊喜的发现,页面无法正常上下滑动,这个坑爹的花了足足3个小时去查页面问题,特此记录一下
  • //ios运行 var divEl = ....//你需要滑动的dom元素 iosTrouchFn(divEl); } function iosTrouchFn(el) { //el需要滑动的元素 el.addEventListener('touchmove',function(e){ e.isSCROLL = true; }) ...
  • Appium 1.7 实现上下、左右滑动页面方法 说明:之前的文章:Appium 测试,实现上下、左右滑动页面 只适用于Appium 1.6.4及以下 Appium升级到1.7 后的问题: (1)以前的driver.swipe方法不能用了。...
  • 举例页面A携带data的参数bar_code跳转到下一页 1.首先在A的wxml中设置你要传的参数 &lt;button bindtap="goPage" data-bar_code="{{data.bar_code}}"&gt;... //参数就在e里面,...
  • Axure8 实现移动端页面上下滑动效果

    万次阅读 2017-01-13 16:17:02
    需要简单算算坐标,在主页面(home)中在拖一个矩形,大小设置w:320px h:800px (与second区域一样大小),并移动该控件覆盖first区域(两控件底边重合),弹出来的坐标y值就是我们需要的,记数值,删掉矩形 9.在...
  • Axure8.0 页面上下滑动效果实现

    万次阅读 2017-04-12 13:27:24
    1.打开Axure 8.0,在网上找一个iPhone外壳的图片,然后添加大小和手机屏幕相等的动态面板,命名为“屏幕” 2.然后双击State1,添加一个矩形,宽度=屏幕宽度,长度任意。 ...然后在“内容”动态面板中,搭建你的手机...
  • 在微信小程序中定义了一个半透明遮罩层,上面显示提示的文字; 但是这是一个长页面,遮罩出现的时候,页面依然可以上下滑动; 为了在遮罩出现的时候禁止用户滑动页面,如下处理: 给这个遮罩层 绑定事件: 使用...
  • jsp页面table表格上下左右居中

    万次阅读 2018-09-30 08:44:00
    &lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;%@taglib uri="/struts-tags" prefix="s"%&...
  • 使用jQuery控制页面滚动条上下滚动

    千次阅读 2018-10-19 10:29:12
    1.向上滚动  $(this).animate({ scrollTop: "-=50" }, 1000); ...参数解读:$(this)表示要实现上下滚动的对象,-50表示向上滚动50px , +50表示向滚动50px ,1000表示滚动速度 ...
  • //ios运行 var scroll = document . getElementById ( "scroll" ) //你需要滑动的dom元素 touchScroll ( scroll ) ; } var canScroll = true ; function touchScroll ( el ) ...
  • 在微信小程序里面的弹出框有时候不能满足我们的需求,需要自己写弹出框,但是要保证页面不要上下滑动,解决方法是在遮盖层用绑定手指触摸事件catchtouchstart。 微信小程序有bind和catch两种事件绑定方法,bind...
  • HTML5 - 简单的上下布局页面样例

    千次阅读 2016-03-17 13:13:54
    1,下面是一个简单的上下布局样例: 2,代码如下 可以看到页面里使用了HTML5的语义元素:、、— index.html —<!DOCTYPE html> 结构 <link rel
  • CSS中的width和height属性的值带%的情况: height:100% 代表基于包含它的块级对象(即父元素)的百分比高度,此时为100%。 widtht:100% 代表基于包含它的块级对象(即父元素)的百分比宽度,此时为100%。...
  • 通过向滑动页面即可触发page页面的onPullDownRefresh方法 滑的触发分两种情况 内容不能充满page 此时你第一次拉会触发一次onReachBottom 解析: 微信这么做的原因是可以让我们在这里进行一次...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 72,709
精华内容 29,083
关键字:

上页下页