H5页面仿原生列表会话左滑显示删除键/编辑键--局部滑动

来源：互联网发布：服装店收银软件破解版编辑：程序博客网时间：2024/05/22 10:47

H5页面仿原生列表会话左滑显示删除键/编辑键--局部滑动

页面滑动原理主要是用了一个左滑手势，需要在页面中引入jquery.mobile-1.4.5.min.js这个插件。

页面文件之间的管理用的是 sea.js 框架.

效果图如下：

1.1 HTML 文件:

<!DOCTYPE html><html><head><!-- iOS中数字变成电话的问题 --><meta name="format-detection" content="telephone=no"/>  <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" /><title>通讯录</title><link type="text/css" rel="stylesheet" href="../../statics/css/common/common.css" /><link type="text/css" rel="stylesheet" href="../../statics/css/manager/friends.css" /><script>    var fontSize = 100;    var elm = document.documentElement;        elm.style.fontSize = fontSize * (elm.clientWidth/320) + 'px';</script></head><body><header class="head-view"><span id="back-btn">< 返回</span><span id="add">添加</span></header><!-- 局部滑动 --><ul class="part-view">{{each}}<li class="item"><div class="left-view"><div class="avatar"><img src="../../statics/images/avatar.png"></div><div class="nickname">小明</div></div><div class="right-view"><div class="right-view-item"><div class="text"><span>共享了3个相册</span></div><div class="icons"><span class="edit"><i></i></span><span class="delete"><i></i></span></div></div></div></li>{{/each}}</ul><!-- 局部滑动模板 --><script type="text/html" id="part-view-template">{{each}}<li class="item"><div class="left-view"><div class="avatar"><img src="../../statics/images/avatar.png"></div><div class="nickname">小明</div></div><div class="right-view"><div class="right-view-item"><div class="text"><span>共享了3个相册</span></div><div class="icons"><span class="edit"><i></i></span><span class="delete"><i></i></span></div></div></div></li>{{/each}}</script></body><script type="text/javascript" src="../../libs/jquery-2.1.4.min.js"></script><script type="text/javascript" src="../../libs/sea.js"></script><script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><script>var base = location.href.split("/app/")[0];seajs.config({paths: {"manager": base + "/modules/manager","libs": base + "/libs","common": base + "/modules/common"},alias: {"template": "libs/template.js","common": "common/common.js"}})// 加载入口模块seajs.use("manager/friends.js");</script></html>

1.2 css 文件:

/*-----------------------局部滑动*/.ui-loader{    display:none}ul{    overflow: hidden;}.item{    height: 0.60rem;    border-bottom: solid 0.01rem #f0f0f0;}.item .left-view{    width: 60%;    height: 100%;    float: left;}.left-view .avatar{    display: inline-block;    float: left;    width: 0.40rem;    height: 0.40rem;    overflow: hidden;    border-radius: 50%;    margin-right: 0.10rem;    margin-left: 0.10rem;    border: 0.04rem white solid;    box-shadow: 0rem 0.02rem 0.05rem #999;    margin-top: 0.06rem;}.avatar img{    width: 100%;    height: 100%;}.left-view .nickname{    height: 100%;    line-height: 0.6rem;    display: inline-block;    float: left;    color: #585858;}.item .right-view{    width: 40%;    height: 100%;    overflow: hidden;    position: relative;}.right-view .right-view-item{    width: 200%;    height: 100%;    overflow: hidden;    -webkit-transition: all 0.3s linear;}.right-view-item.selected{    -webkit-transform: translate(-50%,0);    -webkit-transition:all 0.3s linear;}.right-view-item .text{    width: 50%;    height: 100%;    float: left;    line-height: 0.6rem;    padding-right: 0.1rem;    color: #b7b7b7;    text-align: right;    width: calc(50% - 0.1rem);}.right-view-item .icons{    width: 50%;    height: 100%;    float: left;}.icons span{    width: 50%;    height: 100%;    display: inline-block;    float: left;}.icons span.edit{    background-color: #a0a0a0;}.icons span.delete{    background-color: #9c0100;}.icons span i{    display: inline-block;    width: 0.3rem;    height: 0.3rem;    background-size: 100%;    background-repeat: no-repeat;    margin-top: 0.15rem;    margin-left: calc(50% - 0.15rem);}.icons span.edit i{    background-image: url(../../images/new_ui/edit-white.png);}.icons span.delete i{    background-image: url(../../images/new_ui/delete-white.png);}

1.3 js 文件：

define(function(require, exports, module) {var ArtTemplate = require("libs/template.js");var Common = require('common/common.js');var AppBridge = require("common/app-bridge.js");var Page = {init:function(){var array = [0,0,0,0,0,0,0,0,0];var html = ArtTemplate("part-view-template", array);$(".part-view").html(html);//局部滑动    $(".right-view-item").on("swipeleft",function(){        $(this).addClass('selected');            }).on("swiperight",function(){        $(this).removeClass('selected');    });}};Page.init();});

0 0