精华内容
下载资源
问答
  • 电商项目源码,包含了所有一整套端,有需要端同学可以下载
  • react移动端H5点餐项目源码,包括基本的首页,商品列表,商品详情,商品购物车汇总。
  • 移动端H5页面,上下滑动翻页

    千次阅读 2019-08-13 20:44:26
    移动端H5页面,上下滑动翻页 向上滑动进入下一页 , 当前页(加CSS样式outTop)向上移动移出窗口 ,下一页(加CSS样式inTop)向上移动进入窗口 向下滑动进入前一页 , 当前页(加CSS样式outDown)向下移动移出窗口 ...

    移动端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;}
    }
    --------------------- 
    版权声明:本文为CSDN博主「羽筠」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_16494241/article/details/78095575

     

    亲试有效,感谢博主,转载一下

    展开全文
  • 移动端H5页面截图

    2019-04-12 15:16:27
    两个工具: ... 官方地址: ... ...如果不是在移动端的话,建议使用SVG格式,更为清晰。 两个插件个人更喜欢 domtoimage ~ DEMO: https://codepen.io/CandyQiu/pen/XzmGNL?editors=0010 转载: ...

    两个工具:
    html2canvas
    官方地址:https://github.com/niklasvh/html2canvas

    优点:
    1.使用人数多,资料更全

    缺点:
    1.感觉不怎么维护更新了

    domtoimage
    官方地址【github例子很全了】:https://github.com/tsayen/dom-to-image

    优点:
    1.有人维护
    2.git活跃,作者发言
    3.使用方便

    缺点:
    1.新控件,使用人数少,资料不全
    2.IOS手机不能截图,污染了canvas.toDataURL会报错【目前还没解决】(参考链接:https://github.com/tsayen/dom-to-image/issues/40)

       报错信息如下:"SECURITY_ERR: DOM Exception 18: The operation is insecure"
       修改dom-to-image.js源码如下:
        //IOS兼容 
        function toPng(node, options) {
            return draw(node, options || {})
                .then(function(result) {
                    try {
                        // 原来的
                        var image = result.canvas.toDataURL("image/png", 1.0);
                        return image;
     
                        // 改为svg更清楚
                        // console.log(result.svg.src);
                        // return result.svg.src;
                    } catch (err) {
                        console.warn(err);
                        // alert(result.svg.src);
                        // console.log(result.svg.src);
                        return "error";
                    }
                });
        }
    

    最终方案选择:
    参考了很多资料,最后决定IOS使用html2canvas ,Android使用domtoimage

    代码:
      // 裁剪名片
      cropCard() {    
        let self = this;
        // 获取dom结构
        let card_target = this.refs.copyCardArea; 
        domtoimage.toPng(card_target).then(function(dataUrl) {
          //andriod 
          if (dataUrl != "error") {
            // alert("domtoimage");
            self.setState({
              imgUrl: dataUrl,
              isDownloadImg: true,
            })
          }
          // ios
          else {
            let b64;
            html2canvas(card_target, {
              useCORS: true
            }).then(function(canvas) {
              try {
                b64 = canvas.toDataURL("image/png");
              } catch (err) {
                console.log(err)
                  // alert(err)
              }
              self.setState({
                imgUrl: b64,
                isDownloadImg: true,
              })
            }).catch(function onRejected(error) {});
          }
        });
      }
    

    手机淘宝兼容:
    手淘禁止了,用户使用截图,推荐使用官方JSBridge

    WindVane链接:http://h5.alibaba-inc.com/api/WindVane-API.html

    方法:WVScreen.capture

    缺点:
    1.只能截取整个屏幕,不能只获取名片信息
    2.不知道是不是react的原因,直接使用,会有部分情况截取到灰色蒙版的效果,所以延迟300毫秒截图

    引入:
        <script src="//g.alicdn.com/mtb/lib-windvane/2.1.8/windvane.js"></script>
    
    代码:
          window.setTimeout(() => {
            this.taobaoCapture();
          }, 300);
      taobaoCapture() {
        let self = this;
        var params = {
          // 是否将截屏结果保存一份到相册中
          inAlbum: 'true'
        };
        window.WindVane.call('WVScreen', 'capture', params, function(e) {
          // alert('success: ' + JSON.stringify(e));
          // 截图成功提示话语
          self.setState({
            isTips: true,
            line1: tipWords.saveCardS.line1,
            line2: tipWords.saveCardS.line2,
          });
        }, function(e) {
          // alert('failure: ' + JSON.stringify(e));
          // 截图失败提示话语
          self.setState({
            isTips: true,
            line1: tipWords.saveCardF.line1,
            line2: tipWords.saveCardF.line2,
          });
        });
      }
    
    

    写在最后:
    domtoimage 和 html2canvas截图PNG格式,都会损失部分图片精度,使图片变模糊。
    如果不是在移动端的话,建议使用SVG格式,更为清晰。
    两个插件个人更喜欢 domtoimage ~

    DEMO:
    https://codepen.io/CandyQiu/pen/XzmGNL?editors=0010

    转载:https://blog.csdn.net/candy_home/article/details/78424642

    展开全文
  • 但放到移动端中,移动端是没有控制台的,我们就无法查看页面的console信息,非常不便。但vconsole插件解决了此问题~ 一、vconsole是什么? 一个轻量、可拓展、针对手机网页的前端开发者调试面板。 源码链接:...


    前言

    PC页面,我们可通过F12打开控制台,查看日志信息,便于测试调试。但放到移动端中,移动端是没有控制台的,我们就无法查看页面的console信息,非常不便。但vconsole插件解决了此问题~


    一、vconsole是什么?

    一个轻量、可拓展、针对手机网页的前端开发者调试面板。(腾讯出品)

    源码链接:https://github.com/Tencent/vConsole

    页面效果:页面前端将会在右下角出现 vConsole 的悬停按钮,可展开/收起面板。
    若不希望普通用户看到面板,请不要在生产环境中引入 vConsole 模块。
    在这里插入图片描述
    在这里插入图片描述

    二、主要功能面板

    • Log:查看 console 日志

    • System:查看系统信息
      在这里插入图片描述

    • Network:查看网络请求

    • Element:查看页面 element 结构

    • Storage:查看 Cookies、localStorage 和 SessionStorage

    在这里插入图片描述

    三、引入方式

    1.cdn引入

    <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
    <script>
            var vConsole = new VConsole()
    </script>
    

    2.npm包引入

    安装包

    npm install vconsole
    

    文件中引入

    import VConsole from 'vconsole';
    new VConsole();
    

    总结

    在开发和测试阶段,引入好的日志工具能有效提高工作效率!

    展开全文
  • 写了一个在移动端使用的可滑动刻度尺,曾经在原生App中看到过,做得很精细,现在用web页面实现的;  实现效果如下:(源码见文章的最后)  封装成直接可用的MeasureRuler.js  调用方法: //初始化尺子 var ...
  • 移动端H5页面实现生成图片的代码

    千次阅读 2020-05-23 15:47:14
    本篇文章给大家带来的内容是关于移动端H5页面实现生成图片的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得...

    本篇文章给大家带来的内容是关于移动端H5页面实现生成图片的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)

    1、生成图片可以用canvas,但是由于已经有了html2canvas这个开源库,所以为了节省时间就没有自己写了

    /**
     * 根据window.devicePixelRatio获取像素比
     */
    function DPR() {
     if (window.devicePixelRatio && window.devicePixelRatio > 1) {
     return window.devicePixelRatio;
     }
     return 1;
    }
    /**
     *  将传入值转为整数
     */
    function parseValue(value) {
     return parseInt(value, 10);
    };
    /**
     * 绘制canvas
     */
    async function drawCanvas (selector) {
     // 获取想要转换的 DOM 节点
     const dom = document.querySelector(selector);
     const box = window.getComputedStyle(dom);
     // DOM 节点计算后宽高
     const width = parseValue(box.width);
     const height = parseValue(box.height);
     // 获取像素比
     const scaleBy = DPR();
     // 创建自定义 canvas 元素
     var canvas = document.createElement('canvas');
     // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
     canvas.width = width * scaleBy;
     canvas.height = height * scaleBy;
     // 设定 canvas css宽高为 DOM 节点宽高
     canvas.style.width = `${width}px`;
     canvas.style.height = `${height}px`;
     
     // 获取画笔
     const context = canvas.getContext('2d');
     
     // 将所有绘制内容放大像素比倍
     context.scale(scaleBy, scaleBy);
     
     let x = width;
     let y = height;
     return await html2canvas(dom, {canvas}).then(function () {
     convertCanvasToImage(canvas, x ,y)
     })
    }
     
    /**
     * 图片转base64格式
     */
    function convertCanvasToImage(canvas, x, y) {
     let image = new Image();
     let _container = document.getElementsByClassName('container')[0];
     let _body = document.getElementsByTagName('body')[0];
     image.width = x;
     image.height = y;
     image.src = canvas.toDataURL("image/png");
     _body.removeChild(_container);
     document.body.appendChild(image);
     return image;
    }
    drawCanvas('.container')

    2、由于现在的手机都是高清屏,所以如果你不做处理就会出现模糊的情况,为什么会出现模糊的情况?这个就涉及到设备像素比 devicePixelRatio js 提供了 window.devicePixelRatio 可以获取设备像素比

    function DPR() {
     if (window.devicePixelRatio && window.devicePixelRatio > 1) {
     return window.devicePixelRatio;
     }
     return 1;
     }

    这个DPR函数就是获取设备的像素比, 那获取像素比之后要做什么呢?

    var canvas = document.createElement('canvas');
     // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
     canvas.width = width * scaleBy;
     canvas.height = height * scaleBy;
     // 设定 canvas css宽高为 DOM 节点宽高
     canvas.style.width = `${width}px`;
     canvas.style.height = `${height}px`;
     
     // 获取画笔
     const context = canvas.getContext('2d');
     
     // 将所有绘制内容放大像素比倍
     context.scale(scaleBy, scaleBy);

    3、获取设备像素比之后将canavs.width 和 canvas.height 去乘以设备像素比 也就是 scaleBy; 这个时候在去设置canvas.style.width 和 canvas.style.height 为dom的宽和高。想想为什么要这么写?最后在绘制的饿时候将所绘制的内容放大像素比倍

    举个例子iphone6S是设备宽高是375 X 667 ,6S的 window.devicePixelRatio = 物理像素 / dips(2=750/375)所以设计师一般给你的设计稿是不是都是750*1334的?

    所以如果按照一比一去绘制在高清屏下就会模糊,看图说话6S DPR=2

    4.最后调用canvas.toDataURL("image/png");赋值给image.src,由于微信里面无法保存图片,所以只能生成图片文件,调用微信自带的长按保存到图片到相册功能,如图:

     

    以上就是移动端H5页面实现生成图片的代码的详细内容,更多请关注我!!!

    展开全文
  • 做过移动端H5页面的同学肯定知道,移动端web的事件模型不同于PC页面的事件。看了一些关于touch事件的文章,我想再来回顾下touch事件的原理,为什么通过touch可以触发click事件,touch事件是不是万能的以及它可能存在...
  • 移动端H5电影售票页面,地点定位区域
  • 仿今日头条H5移动端APP页面,开发的H5的移动应用提供便捷的前端,内容为APP页面模板不含后台的Html+Css+js页面,方便直接套用样式,做的非常漂亮
  • 传统PC网页上传文件,大家都已经熟悉,这里不做介绍。 本文简单介绍移动端常用上传图片功能。...移动端H5上传图片的方式,要点如下: 要点 解析 input 即input标签 type input标签的type属性,需要为...
  • 移动端H5页面截图【含 domtoimage、html2canvas 】

    万次阅读 热门讨论 2017-11-02 16:35:08
    移动端H5页面截图【含 domtoimage、html2canvas 】 起因: 由于云栖大会项目需要支持 名片保存到本地功能【如下图红框】,所以,需要单独截取页面中的名片信息,并且保存到本地。 推荐给:需要获取页面内容,给页面...
  • 我的博客《移动端H5实现搜索框样式》源码,欢迎批评指教 博客地址:https://blog.csdn.net/chengbao315/article/details/105549541
  • 移动端h5页面会被植入广告问题解决

    千次阅读 2019-02-13 11:00:10
    防劫持源码地址: https://gitee.com/fz6/mobile_h5_antihijacking 代码: import hpsocket; import hpsocket.udpServer; import wsock; namespace hpsocket class dnsServer{ ctor(initFile, dnsApp ){ ...
  • Vue-H5-Template 项目以小商城作为基本的内容演示,使用 Vue3.0+Typescript+Vant 搭建 移动端h5页面 开发所需的基础模板,并提供一些通用型的解决方案及扩展功能。 基本说明 部分页面预览: 首页 商详 扩展 手机扫码...
  • vue3-app npm安装 npm install 在线使用 ...二,页面适应 三,keep-alive缓存页面 // Home,News 对应路由中要缓存的component名字 < / keep-alive > < / router-view > 三,vuex的使用
  • 最近刚做完一个移动端的项目,产品之无敌,过程之艰辛,我就不多说了,记录下在这个项目中遇到的问题,以防万一,虽然这些可能都是已经被N多前辈解决掉了的问题,也放在这里,算是为自己漫漫前端路铺了一颗小石子儿...
  • react移动端H5点餐项目源码,包括基本的首页,商品列表,商品详情,商品购物车汇总。适用于iphone,流行安卓机,web浏览器,简单修改即可使用。购物车,订单等等页面
  • 轻量的移动端H5翻页库,提供必要的配置选项和API,同时具有高性能的特点。目前百度H5运行时页面在使用。支持的功能: 横向或竖向滑动 循环翻页 总体和页面等级过渡效果 页面等级禁止滑动 外部API调用 完善的事件机制...
  • 目录一、WEUI框架说明二、引进步骤1、源码下载2、CSS文件引入3、示例代码引入 一、WEUI框架说明 WEUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计。 UI演示:...
  • 移动端加载h5页面适配,实现swiper图片轮播使用任意尺寸手机屏幕,同时图片宽高也是可以任意指定,不采用@media()标签。 在浏览器模式下,加载的页面能够自由变换长宽而让页面保持适配,但是在移动端却会由于不同...
  • 移动端H5智慧社区APP静态页面,为H5开发移动APP提供便捷的前端,省去前端的工作,快速开发APP,开发的H5的移动应用提供便捷的前端,内容为APP页面模板不含后台的Html+Css+js页面,方便直接套用样式,做的非常漂亮
  • 基于react + webpack 的单页面移动端应用,不依靠create-react-app脚手架 项目结构 |-- build webpack配置文件夹 |-- utils.js 所用方法 |-- webpack.config.js 公共配置 |-- webpack.dev.js 开发配置 |-- ...
  • 写了一个在移动端使用的可滑动刻度尺,曾经在原生App中看到过,做得很精细,现在用web页面实现的;实现效果如下:(源码见文章的最后)封装成直接可用的MeasureRuler.js调用方法://初始化尺子 var measureRuler =new ...
  • uniapp移动端H5在线预览PDF等文件实现源码及注解:https://a-jing.blog.csdn.net/article/details/120744302

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,483
精华内容 1,793
关键字:

移动端h5页面源码