移動(dòng)端手指左右滑動(dòng)切換內(nèi)容demo

發(fā)布時(shí)間：2020-07-21 13:44:07 來(lái)源：網(wǎng)絡(luò) 閱讀：3368 作者：水中月120 欄目：開發(fā)技術(shù)

說(shuō)在開頭

最近移動(dòng)端做了一個(gè)手指左右滑動(dòng)切換內(nèi)容的效果demo;

為了表示我的無(wú)私，決定分享給諸位；（詳細(xì)代碼見附件）

正文

先上html代碼

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width = device-width" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/javascript">
    </script>
</head>

<body>
    <div class="j-cont">
    <div class="title">穿衣助理</div>
        <div class="m-shape">
            <div class="cont">
                <ul class="f-cb"></ul>
            </div>
            <div class="but_cont">
                <span class="but">完成</span>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>

整個(gè)頁(yè)面ul部分是需要切換的部分具體內(nèi)容有js拼接而成

css代碼如下：（這里直接貼上了less編譯之后）

body,div,ul{margin: 0px;padding: 0px;}
.m-shape{box-sizing: border-box;}
.m-shape .cont{  overflow: hidden;box-sizing: border-box;
}
.j-cont{  margin: 0 auto;
  width: 100%;}
.m-shape .cont ul {
  width: 1000%;
  position: relative;
  margin: 0 7%;
    overflow: hidden;

}
.m-shape .cont ul li {
  display: inline-block;
  float: left;
  width: 8%;
  padding: 0 0.3%;
  overflow: hidden;
  box-sizing: content-box;
}
.m-shape .cont ul li .tishi {
  position: absolute;
  border-radius: 50%;
  background: url(../p_w_picpaths/Assist_icon.png) no-repeat;
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  right: 10px;
  top: 10px;
}
.m-shape .cont ul li .title {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.m-shape .cont ul li .cont {
  height: 77%;
  text-align: center;
}
.m-shape .cont ul li .cont .img {
  height: 100%;
  text-align: center;
}
.m-shape .cont ul li .cont .img img {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}
.m-shape .cont ul li .cont p {
  text-align: center;
  line-height: 40px;
}
.m-shape .cont ul li .msg {
  position: absolute;
  top: 100%;
  left: 10%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  line-height: 30px;
  padding: 10px;
  width: 80%;
  border-radius: 4px;
}
.m-shape .cont ul li .j-conts_item {
  background: #9DE0FF;
  border-radius: 6px;
  position: relative;
}
.m-shape .but_cont {
  text-align: center;
  padding: 20px 0;
}
.m-shape .but_cont .but {
  background: #e9494b;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  width: 30%;
  border-radius: 15px;
  color: #fff;
}
.title{
  text-align: center;
    height: 40px;
  line-height: 40px;
}

上面代碼有一個(gè)地方要說(shuō)明一下：

j-cont的大小為保證自適應(yīng)其大小與手機(jī)屏幕一致（通過(guò)js實(shí)現(xiàn)，詳情見后面js）

而后ul的width設(shè)置為1000%；即屏幕寬度的10倍；

li的關(guān)鍵css如下：

  width: 8%;
  padding: 0 0.3%;
  overflow: hidden;
  box-sizing: content-box;

所以其padding+width = 86%的j-cont，即屏幕寬度的86%；

在執(zhí)行滾動(dòng)時(shí)我也是詞義移動(dòng)86%；但是存在一問(wèn)題如下:

移動(dòng)端手指左右滑動(dòng)切換內(nèi)容demo

第一張圖片左邊沒(méi)有圖片；但是必須預(yù)留這個(gè)位置，不然第一張位置這樣的，后面切換也會(huì)有錯(cuò)位：

移動(dòng)端手指左右滑動(dòng)切換內(nèi)容demo

所以給ul設(shè)置marin:0% 7%;保證首次位置正確，后面每次切換位置也正確。

為了保證所以尺寸的智能設(shè)備自由伸縮，寫了一個(gè)方法初始化容器的大?。?/p>

    //初始化容器
    var html_cont_initialization = function () {
         //初始化容器
        $(".j-cont").css({
            "height": $(window).height() + "px",
            "min-height": $(window).height() + "px"
        });
        //初始化內(nèi)容容器
        $(".j-conts_item").css({
            "height": $(window).height() - 110 + "px",
            "min-height": $(window).height() - 110 + "px",
            "max-height": $(window).height() - 110 + "px"
        }); 

    }

其中110px為頭部title,以及按鈕所在行即：$(".title"),$(".but_cont")高度之和。

還有一段代碼，用來(lái)load內(nèi)容模板（這個(gè)地方，現(xiàn)在是假數(shù)據(jù)）

    var sex_initialization = function () {
        var html = "";
    for (var i = 0; i < 5; i++) {
        html += '<li class="f-cb j-conts">\
            <div class="j-conts_item"><i class="tishi"></i>\
            <div class="title">您的體型是？'+ i + '</div>\
            <div class="cont">\
                <div class="img"><img src="p_w_picpaths/Assist_woman_' + i + '.png" /></div>\
                <p>A型</p>\
            </div>\
        </div></li>';
    }
    $(".m-shape ul").append(html);
    html_cont_initialization();
    
    }

滑動(dòng)代碼如下：

//觸屏左右切換體型效果
    function switchShape() {
        var startX, startY, endX, endY;
        var isMove = false;//觸摸：start,end操作之間是否有move
        var isSwitching = false;//是否正在執(zhí)行動(dòng)畫
        var curIndex = 0;
        var MaxLi = $(".m-shape ul li").length - 1;
        $("body").on("touchmove", ".m-shape ul", touchMoveHandler);
        $("body").on("touchstart", ".m-shape ul", touchStartHandler);
        $("body").on("touchend", ".m-shape ul", touchEndHandler);

        //觸屏左右切換體型效果
        function touchStartHandler(event) {
                event.preventDefault();
            var touch = event.touches[0];
            startY = touch.pageY;
            startX = touch.pageX;
        }

        function touchMoveHandler(event) {
                event.preventDefault();
            var touch = event.touches[0];
            endX = touch.pageX;
            isMove = true;
        }

        function touchEndHandler(event) {
                event.preventDefault();
            if (!isMove || isSwitching) {
                return;
            }
            var w = 86;
            var curLeft = curIndex ? -curIndex * w : 0;
            var dirX = 1;//滑動(dòng)方向
            if (Math.abs(startX - endX) > 50) {//滑動(dòng)間距大于50
                if (startX - endX > 0) {
                    if (curIndex === MaxLi) {//當(dāng)前是最后一個(gè)
                        return;
                    }
                    curIndex++;
                } else {
                    if (0 === curIndex) {//當(dāng)前是第一個(gè)
                        return;
                    }
                    dirX = -1;
                    curIndex--;
                }
            }
            moveTo($(this), "left", curLeft, -curIndex * w, 43, dirX);
            isMove = false;
        }

        //動(dòng)畫函數(shù)
        //params:對(duì)象，css屬性，開始，結(jié)束，50ms移動(dòng)距離,方向1←，-1右
        function moveTo($obj, objProp, start, end, spacing, direction) {
            var temp = start;
            isSwitching = true;
            var moveTimer = setInterval(function () {
                if ((1 === direction && temp - end <= 0) || (-1 === direction && temp - end >= 0)) {
                    clearInterval(moveTimer);
                    isSwitching = false;
                    return;
                }
                temp = temp - spacing * direction;
                $obj.css(objProp, temp + "%");
            }, 200);
        }
    }

    switchShape();

上面代碼有3點(diǎn)需要注意：

每次滑動(dòng)應(yīng)包括三個(gè)動(dòng)作touch start,move,end缺一不可；因?yàn)橛|屏點(diǎn)擊也會(huì)觸發(fā)start,end;
新增isMove狀態(tài)，每次move為true;end后為false；保證三個(gè)動(dòng)作都觸發(fā)才執(zhí)行滑動(dòng)。
具體滑動(dòng)的距離，一般來(lái)講30-50直接都可以；
如果當(dāng)前正在執(zhí)行動(dòng)畫，那么在此滑動(dòng)時(shí)，其實(shí)應(yīng)該忽略；即滑動(dòng)動(dòng)畫執(zhí)行完畢后，再執(zhí)行下一次。

說(shuō)在最后

本人移動(dòng)端玩的少，所以考慮難免不周，多多指教！

向AI問(wèn)一下細(xì)節(jié)

移動(dòng)端手指左右滑動(dòng)切換內(nèi)容demo

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽