精华内容
下载资源
问答
  • <div><p>从A => B,小程序原生基本就是200ms然后看到窗口进来&#...这种有什么解决或者优化的方案,因为太影响体验了,有点蛋疼</p><p>该提问来源于开源项目:Tencent/kbone</p></div>
  • 经常遇到一个问题,微信H5牛牛平台网站(h5.fanshubbs.com)页面由于缓存问题经常在微信H5牛牛平台网站(h5.fanshubbs.com)发布版本之后客户端App看不到最新的效果,之前由于杂七杂八的问题项目工期紧没好好研究...

    经常遇到一个问题,微信H5牛牛平台网站(h5.fanshubbs.com页面由于缓存问题经常在微信H5牛牛平台网站(h5.fanshubbs.com发布新版本之后客户端App看不到最新的效果,之前由于杂七杂八的问题项目工期紧没好好研究,最近抽空研究了下缓存问题。

    缓存问题具体表现为:UIWebview首次打开加载慢;第二次加载速度明显快;H5资源更新过后在App上看不到更改的效果

    为此我认为是缓存造成的问题,我进入App目录下,看到Library下的Caches下面有很多文件名称很长的文件,点击预览可以看到是图片、css等,本来我想着找出微信H5牛牛平台网站资源缓存到App中的特点,然后用NSFileManager删除掉缓存文件,发现此路不通。

    我想通过控制变量法研究缓存是否存在。

    做了一个实验。步骤如下:

    • HBuilder(一个编辑器,开启后本机端口8020就可以访问网页)打开微信H5牛牛工程
    • App的一个UIWebview页面上通过和电脑在同一个局域网的方式加载网页
    • App上查看效果,观察某个元素的样式
    • HBuilder编辑器中修改元素样式
    • App上将UIWebView返回上一界面,再次进入查看该元素的样式
    • 确定有没有变化,来确定有没有缓存

    结论:页面实时效果变化的,没有缓存

    对比实验:

    • HBuilder(一个编辑器,开启后本机端口8020就可以访问网页)打开H5工程
    • git提交到服务端
    • App的一个UIWebview页面上通过公网IP的方式加载网页
    • App上查看效果,观察某个元素的样式
    • HBuilder编辑器中修改元素样式
    • git提交后发布到服务器上
    • App上将UIWebView返回上一界面,再次进入查看该元素的样式
    • 确定有没有变化,来确定有没有缓存

    结论:微信H5牛牛页面没有看到最新的效果,明显缓存了。但是我很想知道为什么本地局域网的方式请求网页不会缓存,而通过公网IP的方式会缓存。

    为此,我做了进一步的实验,用谷歌浏览器分别请求本地局域网和公网ip查看资源加载的情况。

    1、公网IP

    2、本地局域网

    关键词Status Code

    结论:从微信H5牛牛可以看出本地局域网不管首次加载还是刷新都是直接请求;而通过局域网的方式请求:首次请求是从服务器上获取,在此刷新的时候是从(from memory cache)中获取的。

    猜想

    微信H5牛牛平台网站局域网 的方式网速都比较快所以不会缓存;

    公网IP的方式可能由于网速问题会将首次请求到的资源缓存下来。

    所以确定缓存存在了,那么如何避免缓存?

    • App在启动后请求一个接口,这个接口的目的是获取当前H5资源的版本号
    • 将获得的版本号保存下来(App本地保存)
    • 由于UIWebView上加载网页,发起网络请求都可以通过一个代理方法所拦截,所以我们可以在这个代理方法中判断url的参数
    • 由于我们的App使用了不同模块的UIWebView,但是都是在UIWebView上需要大量的JS交互,所以使用了WebViewJavascriptBridge这个库。UIWebView本身的代理方法不会执行,所以修改这个库里面的WebViewJavascriptBridge.m文件的代码,差不多是下面的方式

    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

        if (webView != _webView) { return YES; }

        NSURL *url = [rntity Tag 的资源直接访问equest URL];

        if ([request.URL.absoluteString containsString:@"http"] || [request.URL.absoluteString containsString:@"https"]) {

            if ([request.URL.absoluteString containsString:@"?"]) {

                url = [NSURL URLWithString:[NSString stringWithFormat:@"%@&h5V=%@",request.URL.absoluteString,[ProjectUtil getH5VersionString]]];

            }else{

                url = [NSURL URLWithString:[NSString stringWithFormat:@"%@?h5V=%@",request.URL.absoluteString,[ProjectUtil getH5VersionString]]];

            }

        }

        LBPLOG(@"url->%@",[url absoluteString]);

        __strong WVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;

        if ([_base isCorrectProcotocolScheme:url]) {

            if ([_base isBridgeLoadedURL:url]) {

                [_base injectJavascriptFile];

            } else if ([_base isQueueMessageURL:url]) {

                NSString *messageQueueString = [self _evaluate[removed][_base webViewJavascriptFetchQueyCommand]];

                [_base flushMessageQueue:messageQueueString];

            } else {

                [_base logUnkownMessage:url];

            }

            return NO;

        } else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {

            return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];

        } else {

            return YES;

        }

    }

    总结:

    微信H5牛牛平台网站App的缓存问题暂时研究到这里,后期会继续研究其他方面的问题

    转载于:https://www.cnblogs.com/azyhtys/p/8251026.html

    展开全文
  • 2、图片延迟加载技术,利于网页打开速度 3、首页炫酷的幻灯图效果 4、列表大图展示,吸引点击 5、全站广告位优化,让你的网站即刻盈利 6、页面风格主打轻薄与科技感 7、全站代码精简轻量,利于打开速度 8、tag标签...
  • 黑马安卓52期视频教程

    热门讨论 2015-06-24 22:15:48
    01、安卓基础+JNI(14天)-------------------------- day01_Android应用开发-快速入门 01_网络制式的概念 02_android简单历史 03_Android体系结构 04_JVM和DVM的区别 05_下载SDK 06_SDK目录结构 07_模拟器的创建 ...
  • 炫酷的界面,创新的手势操作、阅读模式、应用中心等强大功能,给用户带来畅快的时代移动浏览体验。 全平台云服务 云推送 - 支持文字、图片、链接、标签在Windows,iOS,Mac间进行数据传输 云分享 - 可将任意...
  • 一、启动定义启动:从手指点击app图标,到第一个页面加载完成.二、启动类型在安卓中应用的启动方式分为以下几种:1.冷启动冷启动:当启动应用时,后台没有该应用的进程,系统会创建一个的进程分配给该应用。冷启动...

    一、启动定义

    启动:从手指点击app图标,到第一个页面加载完成.

    二、启动类型

    在安卓中应用的启动方式分为以下几种:

    1.冷启动

    冷启动:当启动应用时,后台没有该应用的进程,系统会创建一个新的进程分配给该应用。

    冷启动会先创建和初始化 Application 类,再创建和初始化 MainActivity 类,最后显示在界面上。

    2 .热启动

    热启动:当启动应用时,后台已有该应用的进程(如:按back键、home键)。

    热启动只会创建和初始化 MainActivity 类,不会创建和初始化 Application,因为Application 只会初始化一次。

    3 .首次启动

    首次启动:安装应用后第一次启动的过程。

    首次启动也是冷启动,比起冷启动,还会做一些系统初始化工作,如缓存目录创建、数据库创建,所以首次启动花费的时间最长。首次启动的速度非常重要,毕竟影响用户对 App 的第一映像。

    三、启动流程

    1.创建流程
    1. 点击应用图标后,进入Launcher的onClick(), 然后调用 startActivity (),然后调用 Instrumentation 的 execStartActivity()。
    2. Instrumentation 调用 ActivityManagerProxy (ActivityManagerService 在应用进程的一个代理对象) 的 startActivity ()。
    3. ActivityManagerProxy 跨进程调用 ActivityManagerService (运行在 system_server 进程)的 startActivity ()。
    4. ActivityManagerService 最后调用 zygoteSendArgsAndGetResult(), 通过 socket 发送给 zygote 进程,zygote 进程会孵化出新的应用进程。
    5. zygote 执行 ActivityThread 的 main()。在该方法里会先准备好 Looper 和消息队列,然后调用 attach 方法将应用进程绑定到 ActivityManagerService,然后进入 loop 循环,不断地读取消息队列里的消息,并分发消息。
    6. ActivityManagerService 保存应用进程的一个代理对象,然后 ActivityManagerService 通过代理对象通知应用进程创建入口 Activity 的实例,并执行它的生命周期函数。

    2.生命周期

    创建应用进程之前的流程由系统决定,没办法优化。能够优化的是Application和MainActivity 的创建和初始化。

    下面是 MainActivity 的启动流程:

    -> Application 构造函数
    -> Application.attachBaseContext()
    -> Application.onCreate()
    -> Activity.setTheme()
    -> Activity 构造函数 -> Activity.onCreate()
    -> Activity.onAttachedToWindow
    -> Activity.onStart -> Activity.onResume
    -> Activity.onWindowFocusChanged

    四、启动时间

    1.Activity启动时间统计

    通过命令行方式统计启动时间:

    adb shell am start -W appplicationId/packageName.activityName

    输出的结果类似于:

    $ adb shell am start -W com.speed.test/com.speed.test.HomeActivity
    Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=com.speed.test/.HomeActivity }
    Status: ok Activity: com.speed.test/.HomeActivity ThisTime: 496 TotalTime: 496 WaitTime: 503
    Complete
    • ThisTime 最后一个Activity的启动耗时;
    • TotalTime 所有Activity(指定的Activity可能启动其他Activity)的启动耗时;。
    • WaitTime 调用startActivity() 到最后一个Activity启动完成的时间,即当前Activity的onPause()时间+TotalTime

    2.精确时间统计

    通过trace文件分析每个方法的花费时间.

    1.生成trace文件

    1. 使用代码生成

      先通过Debug类生成trace文件,注意加读写权限。

      Debug.startMethodTracing("shixintrace");
      ...
      Debug.stopMethodTracing();

      注意:在Applicaiton中开始trace,然后再MainActivity中结束trace,不会生成trace文件。

      trace文件生成后存放在SD卡中,可能直接存放/sdcard,也可能存在外置专有目录中。

      先通过以下命令找到具体路径:

      adb shell
      cd /sdcard
      find -name *.trace
      可能得到如下结果
      ./Android/data/gsw.test1/files/shixintrace.trace

      然后退出shell状态,通过adb命令取出文件

      adb pull sdcard/Android/data/gsw.test1/files/shixintrace.trace
    2. 使用 Android Studio生成

      生成 trace 文件:Android Monitor -CPU监控-闹钟。

    2.分析trace文件

    如果使用代码生成trace文件,则需要用Android Studio打开.

    分析trace文件:

    1. 先分析线程的执行时间,对时间较长的线程,再分析每个方法的执行时间和调用次数。
    2. 对于执行时间长的方法,需要分析每一步的执行时间,知道找到最深层的长耗时方法。
    3. 对于调用频繁的方法,需要逐步逐层分析调用和依赖。

    五、优化方案

    1.减少启动耗时
    1. 在Application的构造器方法、attachBaseContext()、onCreate()方法中不要进行耗时操作的初始化,一些数据预取放在异步线程中,可以采取Callable实现。
    2. 对于sp(首选项)的初始化,因为sp的特性在初始化时候会对数据全部读出来存在内存中,所以这个初始化放在主线程中不合适,反而会延迟应用的启动速度,对于这个还是需要放在异步线程中处理。
    3. 对于MainActivity,由于在获取到第一帧前,需要对contentView进行测量布局绘制操作,尽量减少布局的层次,考虑StubView的延迟加载策略,当然在onCreate、onStart、onResume方法中避免做耗时操作。

    2.黑白屏优化
    1. 设置特定的背景

      通过设置theme的android:windowBackground属性实现。

      如果设置的背景在应用启动完成后不再需要,可以再通过setTheme()设置背景。

    2. 不显示背景

      通过设置theme的android:windowIsTranslucent属性实现:true代表透明;false代表非透明。

    原文地址:https://blog.csdn.net/dshdhsd/article/details/79808172

    展开全文
  • |--ListView优化之分页加载 |--ListView优化之动态加载 |--ListView优化之控制getView实现复杂显示 |--ListView优化之标准写法 |--listview老虎机 界面设计 水果机 |--listview页面跳转 数据库交互 事务 dao biz 层...
  • -去微博上的广告占位和资源加载 -去主菜单更新升级选项 -去关于窗口许可协议超链接 -去主面板最小宽度和高度限制(最小都为101) -去临时会话窗口右下角广告 -去主面板应用宝按钮和占位 -去我的设备文件助手的应用宝...
  • 增加手机主页模板和电脑主页模板 手机版信息列表图片改为延时加载,显示速度更快 增加禁止发布重复信息功能 可单独设置会员发布信息价格 限制每天发布信息数量对未登录用户也生效 增加生成微信朋友圈海报功能,...
  • 我们尝试使用 用webview 加载html页面的方式,实现安卓、iOS开发的同步进行。 UIWebview 存在内存泄露问题,iOS8以后,苹果推出了框架Webkit,提供了替换UIWebView的组件WKWebView。 WKWebView 在内存占用上优化的...

    为了缩短开发周期。我们尝试使用 用webview 加载html页面的方式,实现安卓、iOS开发的同步进行。

    UIWebview 存在内存泄露问题,iOS8以后,苹果推出了新框架Webkit,提供了替换UIWebView的组件WKWebView。

    WKWebView 在内存占用上优化的很多。但是在实践中发现bug:localstorage信息不一致。
    A页面和B页面都存在 一个WKWebView。 在B页面使用localstorage保存信息。 回到A页面取不到最新的数据。

    原因:

    wkwebviewconfiguration 中有个属性 processPool,描述是:The process pool from which to obtain the view’s Web Content process.

    解决方法

    将WKWebViewConfiguration中的processPool 设置成一个 也就是可以使用单利的形式进行创建使这个资源池达到共享

    代码如下

    @interface ZTWkProcessPool : WKProcessPool
    + (instancetype)singleWkProcessPool;
    @end
    
    @implementation ZTWkProcessPool
    + (instancetype)singleWkProcessPool{
        static ZTWkProcessPool *staticInstance;
        static dispatch_once_t onceToken;
        dispatch_once(&onceToken, ^{
            staticInstance = [[self alloc] init];
        });
        return staticInstance;
    }
    @end
    
     WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
     config.processPool = [ZTWkProcessPool singleWkProcessPool];
     
     pWebView = [[tztWKWebView alloc] initWithFrame:self.bounds configuration:config];
    

    这样就解决了WKWebview localstorage 存取信息不一致问题或者取不到的问题

    展开全文
  • vue 仿抖音视频列表(兼容微信内置X5浏览器)

    万次阅读 多人点赞 2019-02-18 11:37:22
    2019年12月最新更新 新增留言功能,优化安卓微信环境境下播放不流畅问题 项目GIT地址 ... ...制作仿抖音视频列表遇到很多坑,特别是安卓微信内置浏览器,让人...图标css使用的事iconfot字体库,优化页面加载速度htt...

    2019年12月最新更新

    新增留言功能,优化安卓微信环境境下播放不流畅问题

    项目GIT地址

    https://github.com/superJinx/fangdouyin

     

    demo预览,请用微信扫描二维码

     

    制作 仿抖音视频列表遇到很多坑,特别是安卓微信内置浏览器,让人脑壳疼,核心代码不多 便于理解

    图标css使用的事iconfot字体库,优化页面加载速度 http://at.alicdn.com/t/font_1048614_mi5i5ba1uag.css

    组件用到了vant 中的swiper滑动组件

    h5 原生 video 属性

    webkit-playsinline ios 小窗播放,使视频不脱离文本流,安卓则无效

    微信内置x5内核,

    x5-video-player-type="h5-page" 启用H5播放器,是wechat安卓版特性,添加此属性,微信浏览器会自动将视频置为全屏

    x5-video-player-fullscreen="true" 全屏设置,设置为 true 是防止横屏

    x5-video-orientation 控制横竖屏 landscape 横屏,portrain竖屏; 默认portrain

    poster:封面

    src:播放地址

    loop防止播放视频结束后,显示腾讯的广告

     

    <template>
        <div class="container_box" id="video_box">
            <div class="van_swipe">
                <!--vant van-swipe 滑动组件 -->
                <van-swipe :show-indicators="false" @change="onChange" vertical :loop="false">
                    <van-swipe-item v-for="(item, index) in videoList" :key="index" class="product_swiper">
                        <div class="video_container">
                            <!--video属性
                        webkit-playsinline ios 小窗播放,使视频不脱离文本流,安卓则无效
                        微信内置x5内核,
                        x5-video-player-type="h5-page" 启用H5播放器,是wechat安卓版特性,添加此属性,微信浏览器会自动将视频置为全屏
                        x5-video-player-fullscreen="true" 全屏设置,设置为 true 是防止横屏
                        x5-video-orientation 控制横竖屏 landscape 横屏,portrain竖屏; 默认portrain
                        poster:封面
                        src:播放地址
                        -->
                            <video class="video_box" loop webkit-playsinline="true" x5-video-player-type="h5-page" x5-video-player-fullscreen="true" playsinline preload="auto"
                                   :poster="item.cover" :src="item.url" :playOrPause="playOrPause"
                                   @click="pauseVideo" @ended="onPlayerEnded($event)"
                                   >
                            </video>
                            <!-- 封面 -->
                            <img v-show="isVideoShow" class="play" @click="playvideo" :src="item.cover"/>
                            <!-- 播放暂停按钮 -->
                            <img v-show="iconPlayShow" class="icon_play" @click="playvideo"
                                 src="http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575340653940esdHR.png"/>
                        </div>
                        <!-- 右侧头像、点赞、评论、分享功能 -->
                        <div class="tools_right">
                            <div class="tools_r_li">
                                <img :src="item.tag_image" class="tag_image">
                                <i class="iconfont icon-jiahao tag_add" v-show="!item.tagFollow"
                                   @click="checkSubscribe(item,index)"></i>
                                <i class="iconfont icon-duihao tag_dui" v-show="item.tagFollow"
                                   :class="item.tagFollow?'tag_dui_active':''"></i>
                            </div>
                            <div class="tools_r_li" @click="changeFabulous(item,index)">
                                <i class="iconfont icon-shoucang icon_right"
                                   :class="item.fabulous?'fabulous_active':''"></i>
                                <div class="tools_r_num">52.1w</div>
                            </div>
                            <div class="tools_r_li" @click="changeComment">
                                <i class="iconfont icon-liuyan icon_right icon_right_change"></i>
                                <div class="tools_r_num">12.5w</div>
                            </div>
                            <div class="tools_r_li" @click="changeShare">
                                <i class="iconfont icon-iconfontforward icon_right"></i>
                                <div class="tools_r_num">22.2w</div>
                            </div>
                        </div>
                        <!-- 底部作品描述 -->
                        <div class="production_box">
                            <div class="production_name">
                                @superKM
                            </div>
                            <div class="production_des">
                                年轻的时候要注意‘养生’,少玩手机多睡觉!少玩手机多睡觉!少玩手机多睡觉!切记少玩手机多睡觉!少玩手机多睡觉!少玩手机多睡觉!@ 抖音小助手
                            </div>
                        </div>
                    </van-swipe-item>
                </van-swipe>
                <!--底部操作栏-->
                <div class="container_bottom">
                    <div class="border_progress" :style="'width:'+videoProcess+'%'"></div>
                    <div class="bottom_tab" :class="tabIndex==0?'tab_active':''" @click="changeTab(0)">
                        <span class="bottom_tab_span ">首页</span>
                    </div>
                    <div class="bottom_tab" :class="tabIndex==1?'tab_active':''" @click="changeTab(1)">
                        <img src="http://oss.jishiyoo.com/images/file-1575427746903.png" alt="" class="bottom_tab_icon">
                    </div>
                    <div class="bottom_tab" :class="tabIndex==2?'tab_active':''" @click="changeTab(2)">
                        <span class="bottom_tab_span">我的</span>
                    </div>
                </div>
                <!--分享弹框-->
                <div class="share_box" :class="showShareBox?'share_active':''">
                    <div class="share_tips">分享到</div>
                    <ul class="share_ul">
                        <li class="share_li pengyouquan_li">
                            <i class="iconfont icon-pengyouquan pengyouquan"></i>
                        </li>
                        <li class="share_li">
                            <i class="iconfont icon-weixin weixin"></i>
                        </li>
                        <li class="share_li" @click="copyUrl">
                            <i class="iconfont icon-lianjie lianjie"></i>
                        </li>
                        <div class="clear"></div>
                    </ul>
                    <div class="share_cancel" @click="cancelShare">取消</div>
                </div>
                <!--留言弹窗-->
                <van-popup v-model="commentPop" :overlay="true" class="comment_container" position="bottom">
                    <div class="comment_box">
                        <div class="comment_top">
                            12.5w条评论
                            <i class="iconfont icon-guanbi1 guanbi3" @click="closeComment"></i>
                        </div>
                        <ul class="comment_ul">
                            <div v-if="videoComment.length!=0">
                                <transition-group appear>
                                    <li class="comment_li" v-for="(item,index) in videoComment" :key="index"
                                        @click="replayUser(item,index,-1)">
                                        <div class="comment_author_left">
                                            <img :src="item.avatar">
                                        </div>
                                        <div class="comment_author_right">
                                            <div class="comment_author_top">
                                                <div class="comment_author_name">@{{item.nickname}}</div>
                                                <div class="icon-shoucang1_box" @click.stop="commentLove(item,index,-1)">
                                                    <div class="icon_right_change"
                                                         :class="item.love_comment?'love_active':''">
                                                        <i class="iconfont icon-shoucang icon-shoucang1"></i>
                                                    </div>
                                                    <div class="shoucang1_num">{{item.love_count}}</div>
                                                </div>
                                            </div>
                                            <div class="comment_author_text">
                                                {{item.comment_content}}<span>{{item.create_time}}</span></div>
                                        </div>
                                        <div class="clear"></div>
                                        <div class="comment_replay_box">
                                            <transition-group appear>
                                                <div class="comment_replay_li" v-for="(item2,index2) in item.child_comment"
                                                     :key="index2" @click.stop="replayUser(item2,index,index2)">
                                                    <div class="comment_replay_left">
                                                        <img :src="item2.avatar">
                                                    </div>
                                                    <div class="comment_replay_right">
                                                        <div class="comment_replay_top">
                                                            <div class="comment_replay_name">@{{item2.nickname}}</div>
                                                            <div class="icon-shoucang1_box"
                                                                 @click.stop="commentLove(item2,index,index2)">
                                                                <div class="icon_right_change"
                                                                     :class="item2.love_comment?'love_active':''">
                                                                    <i class="iconfont icon-shoucang icon-shoucang1"></i>
                                                                </div>
                                                                <div class="shoucang1_num">{{item2.love_count}}</div>
                                                            </div>
                                                        </div>
                                                        <div class="comment_replay_text">
                                                            <span v-if="item.user_id!=item2.be_commented_user_id && item.user_id!=item2.user_id">回复 {{item2.be_commented_nickname}}:</span>
                                                            {{item2.comment_content}}
                                                            <span>{{item2.create_time}}</span></div>
                                                    </div>
                                                    <div class="clear"></div>
                                                </div>
                                            </transition-group>
                                        </div>
                                    </li>
                                </transition-group>
                            </div>
                            <div class="no_message" v-if="videoComment.length==0">
                                <i class="iconfont iconfont_style icon-zanwupinglun"></i>
                                <div class="no_message_tips">暂无评论</div>
                            </div>
                        </ul>
                    </div>
                </van-popup>
                <!--留言输入-->
                <div class="comment_input_box_hover"></div>
                <div class="comment_input_box" v-show="commentPop">
                    <!--<form action="#" class="comment_form">-->
                    <input :placeholder="commentPlaceholder" class="comment_input" v-model="comment_text" ref="content"
                           @keyup.enter="checkComment"/>
                    <!--</form>-->
                    <div class="comment_input_right" @click="checkComment">
                        <i class="iconfont icon-fasong comment_i" :class="canSend?'comment_i_active':''"></i>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <script>
        import Vue from "vue";
        import {
            Swipe,
            SwipeItem,
            Toast
        } from 'vant';
    
        Vue.use(Swipe, Toast).use(SwipeItem);
    
        let videoProcessInterval;
        export default {
            name: 'home',
            data() {
                let u = navigator.userAgent;
                return {
                    current: 0,
                    videoList: [{
                        url: 'http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4',//视频源
                        cover: 'http://oss.jishiyoo.com/images/file-1575341210559.png',//封面
                        tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg',//作者头像
                        fabulous: false,//是否赞过
                        tagFollow: false,//是否关注过该作者
                        author_id: 1,//作者ID
                    }, {
                        url: 'http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4',
                        cover: 'http://oss.jishiyoo.com/images/file-1575343195934.jpg',
                        tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449298299M3V50.jpg',
                        fabulous: true,//是否赞过
                        tagFollow: false,//是否关注过该作者
                        author_id: 2,//作者ID
                    }, {
                        url: 'http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4',
                        cover: 'http://oss.jishiyoo.com/images/file-1575343262684.jpg',
                        tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg',
                        fabulous: false,//是否赞过
                        tagFollow: false,//是否关注过该作者
                        author_id: 1,//作者ID
                    }, {
                        url: 'http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4',
                        cover: 'http://oss.jishiyoo.com/images/file-1575343508574.jpg',
                        tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg',
                        fabulous: false,//是否赞过
                        tagFollow: false,//是否关注过该作者
                        author_id: 1,//作者ID
                    }],
                    isVideoShow: true,
                    playOrPause: true,
                    video: null,
                    iconPlayShow: true,
                    isAndroid: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
                    isiOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
                    tabIndex: 0,
                    showShareBox: false,//展示分享框
                    commentPop: false,//是否展示评论弹框
                    // 评论相关
                    comment_text: '',//评论输入内容
                    canSend: false,//是否可以发送
                    videoComment: [],
                    commentPlaceholder: '留下你精彩的评论吧',//评论Placeholder
                    replayUserData: '',
                    to_comment_id: '',
                    videoProcess: 0,//视频播放进度
                }
            },
            watch: {
                //监听输入变化
                comment_text(newV, oldV) {
                    newV == '' ? this.canSend = false : this.canSend = true
                }
            },
            methods: {
                //获取评论
                getComment() {
                    //setTimeout模拟Ajax请求
                    setTimeout(() => {
                        let data = [{
                            "comment_id": 297,
                            "p_id": 0,
                            "comment_content": "你好,我叫蓝湛",
                            "love_count": 0,
                            "create_time": "1月前",
                            "user_id": 78634,
                            "nickname": "蓝忘机\uD83C\uDF1F",
                            "avatar": "http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg",
                            "be_commented_user_id": 0,
                            "be_commented_nickname": "",
                            "be_commented_avatar": "",
                            "child_comment": [{
                                "comment_id": 298,
                                "p_id": 296,
                                "comment_content": "蓝二公子,今天天气不错",
                                "love_count": 1,
                                "create_time": "7天前",
                                "user_id": 55163,
                                "nickname": "魏婴",
                                "avatar": "http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKPJb1k8zia02PjVibdaDJ83JIDGm0hIsY34kAlXyZMT6FMBibdw6rhdPPjpxtp6d8B75x5Kpicxp2gqw/132",
                                "be_commented_user_id": 78480,
                                "be_commented_nickname": "chenchen",
                                "be_commented_avatar": "http://thirdwx.qlogo.cn/mmopen/vi_32/icxHc0Ym1p4hQAFAUnjpxDPMkEUyojnibBj9wUSS2OmibiazdBAicSLpoicricVYP6QG6XicjTzQPx9koMPqcGfhTOy5qA/132",
                                "love_comment": true
                            },],
                            "love_comment": false
                        }, {
                            "comment_id": 281,
                            "p_id": 0,
                            "comment_content": "楼主好帅,我要嫁给你!!",
                            "love_count": 0,
                            "create_time": "1月前",
                            "user_id": 74164,
                            "nickname": "冰雪奇缘2",
                            "avatar": "http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449298299M3V50.jpg",
                            "be_commented_user_id": 0,
                            "be_commented_nickname": "",
                            "be_commented_avatar": "",
                            "child_comment": [],
                            "love_comment": false
                        }];//获取评论数据
                        this.videoComment = [...this.videoComment, ...data];
                        let to_comment_id = this.to_comment_id;
                        if (to_comment_id != 0) {
                            //从评论列表进来回复
                            this.getCommentDetail(to_comment_id);
                        }
                    }, 500)
                },
                //获取单个评论
                getCommentDetail(to_comment_id) {
                    let obj = {
                        action: 'show_comment_info',
                        comment_id: to_comment_id
                    };
                    setTimeout(() => {
                        let index;
                        let item = res.data;
                        this.videoComment.map((v, i) => {
                            v.child_comment.map((v2, i2) => {
                                if (v2.comment_id == to_comment_id) {
                                    index = i;
                                }
                            });
                        });
                        setTimeout(() => {
                            //对评论重新排序,存在to_comment_id的时候排至第一个
                            let firstComment = this.videoComment.splice(index, 1);
                            this.videoComment.unshift(firstComment[0]);
                            //重设回复人
                            item.index = 0;
                            item.index2 = 0;
                            this.replayUserData = item;
                            this.commentPlaceholder = `回复 @${item.nickname}:`;
                            this.$refs.content.focus();
                        }, 10)
                    }, 500)
                },
                //检测评论内容
                checkComment() {
                    if (this.comment_text == '') {
                        Toast('评论内容不能为空')
                    } else {
                        let comment_id = 0, p_id = '', p_user_id = '', content = this.comment_text;
                        if (this.replayUserData != '') {
                            comment_id = this.replayUserData.comment_id;
                            p_id = this.replayUserData.p_id;
                            p_user_id = this.replayUserData.user_id;
                        }
                        this.sendComment(comment_id, p_id, p_user_id, content)
                    }
                },
                //发送评论
                sendComment(comment_id, p_id, p_user_id, content) {
                    this.comment_text = '';
                    this.isSending = true;
                    setTimeout(() => {
                        let newData = {
                            "comment_id": comment_id,
                            "p_id": p_id,
                            "comment_content": content,
                            "love_count": 0,
                            "create_time": "刚刚",
                            "user_id": p_user_id,
                            "nickname": "游客",//当前用户
                            "avatar": 'https://profile.csdnimg.cn/B/1/E/3_ridingfish',//当前用户头像
                            "be_commented_user_id": this.replayUserData.user_id,
                            "be_commented_nickname": this.replayUserData.nickname,
                        }
                        if (this.replayUserData == '') {
                            //回复作品
                            this.videoComment.splice(0, 0, newData)
                        } else {
                            let index = this.replayUserData.index;
                            let index2 = this.replayUserData.index2;
                            if (this.replayUserData.index2 == -1) {
                                //回复一级人
                                this.videoComment[index].child_comment.splice(0, 0, newData)
                            } else {
                                //回复二级人
                                this.videoComment[index].child_comment.splice(index2, 0, newData)
                            }
                        }
                        this.replayUserData = '';
                        this.isSending = false;
                    }, 500)
                },
                //评论点赞
                commentLove(item, index, index2) {
                    let comment_id = item.comment_id,
                        user_id = item.user_id,
                        love_comment = item.love_comment,
                        love_flag = 0;//0:取消点赞;1:点赞
                    if (love_comment) {
                        //取消点赞
                        love_flag = 0
                    } else {
                        //添加点赞
                        love_flag = 1
                    }
                    //setTimeout模拟Ajax请求
                    setTimeout(() => {
                        if (index2 == -1) {
                            //点赞一级评论
                            this.videoComment[index].love_comment = !this.videoComment[index].love_comment;
                            if (love_flag == 1) {
                                this.videoComment[index].love_count++
                            } else {
                                this.videoComment[index].love_count--
                            }
                        } else {
                            //点赞二级评论
                            this.videoComment[index].child_comment[index2].love_comment = !this.videoComment[index].child_comment[index2].love_comment
                            if (love_flag == 1) {
                                this.videoComment[index].child_comment[index2].love_count++
                            } else {
                                this.videoComment[index].child_comment[index2].love_count--
                            }
                        }
                    }, 500)
                },
                //点击回复
                replayUser(item, index, index2) {
                    item.index = index;
                    item.index2 = index2;
                    this.replayUserData = item;
                    this.commentPlaceholder = `回复 @${item.nickname}:`;
                    this.$refs.content.focus();
                },
                //弹出评论窗口
                changeComment() {
                    this.commentPop = true;
                    this.videoComment = [];
                    this.getComment()
                },
                //关闭评论弹窗
                closeComment() {
                    this.commentPop = false;
                    this.commentPlaceholder = '留下你精彩的评论吧';
                    this.replayUserData = '';
                },
                //关注该作者
                checkSubscribe(item, index) {
                    this.videoList.map(v => {
                        v.author_id == item.author_id ? v.tagFollow = true : '';
                    })
                },
                //改变菜单
                changeTab(index) {
                    this.tabIndex = index
                },
                //改变收藏状态
                changeFabulous(item, index) {
                    this.videoList[index].fabulous = !this.videoList[index].fabulous
                },
                //展示分享弹窗
                changeShare() {
                    this.showShareBox = true
                },
                //取消分享
                cancelShare() {
                    this.showShareBox = false
                },
                //滑动改变播放的视频
                onChange(index) {
                    //改变的时候 暂停当前播放的视频
                    clearInterval(videoProcessInterval)
                    this.videoProcess = 0;
                    let video = document.querySelectorAll('video')[this.current];
                    video.pause();
                    this.playOrPause = false;
                    this.showShareBox = false;
                    this.current = index;
                    //切换直接自动播放下一个
                    this.isVideoShow = false;
                    this.pauseVideo()
                },
                // 开始播放
                playvideo(event) {
                    let video = document.querySelectorAll('video')[this.current];
                    console.log("playvideo:" + this.current);
                    this.isVideoShow = false;
                    this.iconPlayShow = false;
                    this.showShareBox = false;
                    video.play();
                    window.onresize = function () {
                        video.style.width = window.innerWidth + "px";
                        video.style.height = window.innerHeight + "px";
                    }
    
                    videoProcessInterval = setInterval(() => {
                        this.changeProcess(video)
                    }, 100)
                },
                pauseVideo() { //暂停\播放
                    let video = document.querySelectorAll('video')[this.current];
                    console.log("pauseVideo" + this.current);
                    if (this.playOrPause) {
                        video.pause();
                        this.iconPlayShow = true;
                        clearInterval(videoProcessInterval)
                    } else {
                        video.play();
                        this.iconPlayShow = false;
                        videoProcessInterval = setInterval(() => {
                            this.changeProcess(video)
                        }, 100)
                    }
                    this.playOrPause = !this.playOrPause;
                    this.showShareBox = false;
    
                },
                //记录播放进度
                changeProcess() {
                    let video = document.querySelectorAll('video')[this.current];
                    let currentTime = video.currentTime.toFixed(1);
                    let duration = video.duration.toFixed(1);
                    this.videoProcess = parseInt((currentTime / duration).toFixed(2) * 100)
                },
                onPlayerEnded(player) { //视频结束
                    this.isVideoShow = true
                    this.current += this.current
                },
                //复制当前链接
                copyUrl() {
                    let httpUrl = window.location.href;
                    var oInput = document.createElement('input');
                    oInput.value = httpUrl;
                    document.body.appendChild(oInput);
                    oInput.select(); // 选择对象
                    document.execCommand("Copy"); // 执行浏览器复制命令
                    oInput.className = 'oInput';
                    oInput.style.display = 'none';
                    alert("链接复制成功")
                }
            }
        }
    </script>
    <style scoped>
        .clear {
            clear: both;
        }
    
        .video-player {
            height: 100vh;
            width: 100vw;
        }
    
        .product_swiper {
            width: 100vw;
            height: 100vh;
        }
    
        .van_swipe {
            width: 100vw;
            height: 100vh;
            max-width: 550px;
            margin: 0 auto;
            position: relative;
        }
    
        .van-swipe {
            width: 100%;
            height: 100%;
        }
    
        .container_box {
            width: 100vw;
            height: 100vh;
            background: #000;
        }
    
        .video_box {
            object-fit: fill !important;
            z-index: 999;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
        }
    
        video {
            object-position: 0 0;
        }
    
        .icon_play {
            position: absolute;
            top: 44%;
            right: 0;
            left: 0;
            bottom: auto;
            margin: auto;
            z-index: 999;
            height: 60px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
        }
    
        .play,
        .platStart {
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            z-index: 999;
            width: 100%;
            height: 100%;
        }
    
        /*头像, 点赞,转发 */
        .tag_image {
            width: 50px;
            height: 50px;
            border: 1px solid #fff;
            box-sizing: border-box;
            border-radius: 50%;
            margin-bottom: 20px;
            position: relative;
            box-shadow: 0px 0px 10px #9d9d9d;
        }
    
        .tag_add {
            position: absolute;
            bottom: 12px;
            left: 0;
            right: 0;
            border-radius: 67px;
            display: inline-block;
            width: 18px;
            height: 18px;
            line-height: 18px;
            margin: 0 auto;
            z-index: 1;
            font-size: 20px;
            color: #f44;
            background: #fff;
        }
    
        .tag_dui {
            position: absolute;
            bottom: 12px;
            left: 0;
            right: 0;
            border-radius: 67px;
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            margin: 0 auto;
            z-index: 1;
            font-size: 11px;
            color: #f44;
            background: #fff;
        }
    
        .tag_dui_active {
            opacity: 0;
            animation: showFollow 1.4s ease-in-out 0s;
        }
    
        .tag_add_num {
            position: absolute;
            bottom: 0px;
            left: 0;
            right: 0;
        }
    
        @keyframes showFollow {
            0% {
                opacity: 1;
                color: #fff;
                background: #F44;
                transform: rotate(-180deg) scale(1);
            }
            35% {
                opacity: 1;
                color: #f44;
                background: #fff;
                transform: rotate(0deg) scale(1.2);
            }
            80% {
                opacity: 1;
                color: #f44;
                transform: scale(1.2);
            }
            100% {
                opacity: 0;
                display: none;
                color: #f44;
                transform: scale(0);
            }
        }
    
        .tools_right {
            z-index: 1001;
            position: absolute;
            right: 16px;
            bottom: 180px
        }
    
        .tools_r_li {
            margin-bottom: 20px;
            color: #fff;
            font-size: 14px;
            position: relative;
        }
    
        .tools_r_li:last-child {
            margin-bottom: 0px;
        }
    
        .icon_right {
            margin-bottom: 5px;
            font-size: 42px;
            display: block;
            text-shadow: 0px 0px 10px #9d9d9d;
            /*transition: .5s;*/
        }
    
        .production_box {
            z-index: 1001;
            position: absolute;
            /* right: 16px; */
            bottom: 48px;
            text-align: left;
            padding: 0 15px 15px 15px;
            color: #fff;
            width: 100%;
            left: 0;
            box-sizing: border-box;
            background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
            /* Firefox 3.6 - 15 */
            background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
            /* 标准的语法 */
        }
    
        .production_name {
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 10px;
        }
    
        .production_des {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            min-height: 62px;
            font-size: 13px;
        }
    
        .container_bottom {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.85);
            height: 48px;
            /*border-top: 1px solid rgba(255, 255, 255, 0.7);*/
            max-width: 550px;
        }
    
        .production_top {
            display: inline-block;
            padding: 6px;
            margin-bottom: 5px;
            background: rgba(0, 0, 0, .3);
            border-radius: 6px;
            margin-top: 5px;
        }
    
        .product_go {
            color: #fbdd21;
        }
    
        .production_title {
            margin-left: 4px;
        }
    
        .border_progress {
            width: 0;
            height: 1px;
            background: #bababa;
            position: absolute;
            top: 0;
            transition: .1s all;
        }
    
        .bottom_tab {
            width: 33%;
            text-align: center;
            float: left;
            color: #c9c9c9;
            padding: 10px 0;
        }
    
        .bottom_tab_icon {
            width: 44px;
        }
    
        .bottom_tab_span {
            line-height: 28px;
            border-bottom: 2px solid transparent;
            font-weight: 600;
            font-size: 16px;
            display: inline-block;
            padding: 0 4px;
            transition: .5s all;
        }
    
        .tab_active .bottom_tab_span {
            border-bottom: 2px solid #fff;
            color: #fff;
        }
    
        .icon-shoucang {
            transition: .5s all;
        }
    
        .fabulous_active {
            color: #f44;
            animation: showHeart .5s ease-in-out 0s;
        }
    
        /*animation-name:用来调用@keyframes定义好的动画,与@keyframes定义的动画名称一致*/
        /*animation-duration :指定元素播放动画所持续的时间*/
        /*animatino-timing-function : 和transition中的transition-timing-function 中的值一样。根据上面@keframes中分析的animation中可能存在多个小动画,因此这里的值设置是针对每一个小动画所在时间范围内的属性变换速率。*/
        /*animation-delay:定义在浏览器开始执行动画之前等待的时间,这里是指整个animation执行之前的等待时间,而不是上面说的多个小动画*/
        /*animation-iteration-count:定义动画的播放次数,其通常为整数,默认是1,;取值为infinite,动画将无限次的播放。*/
        /*animation-direction:主要用来设置动画播放方向*/
        @keyframes showHeart {
            0% {
                color: #f44;
                transform: scale(1);
            }
    
            25% {
                color: #fff;
                transform: scale(0);
            }
    
            80% {
                color: #f44;
                transform: scale(1.2);
            }
    
            100% {
                color: #f44;
                transform: scale(1);
            }
        }
    
        /*分享样式*/
        .share_hover {
            position: fixed;
            display: none;
    
        }
    
        .share_box {
            position: fixed;
            bottom: -300px;
            width: 100%;
            z-index: 1002;
            background: #fff;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            transition: .5s;
        }
    
        .share_tips {
            text-align: center;
            line-height: 38px;
            color: #333;
        }
    
        .share_ul {
            box-sizing: border-box;
            padding: 0 25px 25px;
            border-bottom: 1px solid #e8e8e8;
        }
    
        .share_li {
            float: left;
            width: 33%;
            text-align: center;
        }
    
        .share_li i {
            font-size: 44px;
        }
    
        .share_cancel {
            text-align: center;
            line-height: 48px;
            color: #777;
            text-align: center;
        }
    
        .pengyouquan {
            color: #47D000;
    
        }
    
        .pengyouquan_li {
            animation: rotating 8s linear infinite
        }
    
        @keyframes rotating {
            from {
                transform: rotate(0)
            }
    
            to {
                transform: rotate(360deg)
            }
        }
    
        .weixin {
            color: #20CA2E;
        }
    
        .lianjie {
            color: #cdcdcd;
        }
    
        .share_active {
            bottom: 0px;
        }
    
        /*评论样式*/
        ::-webkit-input-placeholder {
            color: rgba(0, 0, 0, 0.20);
        }
    
        :-moz-placeholder {
            color: rgba(0, 0, 0, 0.20);;
        }
    
        ::-moz-placeholder {
            color: rgba(0, 0, 0, 0.20);
        }
    
        :-ms-input-placeholder {
            color: rgba(0, 0, 0, 0.20);
        }
    
        .comment_container {
            width: 100%;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
    
        .comment_box {
            padding: 0 15px 52px 15px;
        }
    
        .comment_top {
            text-align: center;
            font-size: 12px;
            color: #000;
            line-height: 40px;
        }
    
        .guanbi3 {
            float: right;
            font-size: 12px;
            padding: 0 10px;
            position: absolute;
            right: 6px;
        }
    
        .comment_li {
            margin-bottom: 20px;
            font-size: 14px;
            text-align: left;
        }
    
        .comment_author_left {
            float: left;
        }
    
        .comment_author_left img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
        }
    
        .comment_author_right {
            margin-left: 46px;
            padding-top: 4px;
        }
    
        .comment_author_top {
            position: relative;
        }
    
        .comment_author_name {
            margin-bottom: 6px;
            color: #777;
        }
    
        .icon-shoucang1_box {
            position: absolute;
            right: 0px;
            top: 0;
            text-align: center;
            color: #777;
        }
    
        .comment_author_text {
            color: #555;
            margin-bottom: 10px;
            padding-right: 35px;
        }
    
        .comment_replay_box {
            padding-left: 46px;
            box-sizing: border-box;
        }
    
        .comment_replay_li {
            margin-bottom: 10px;
        }
    
        .comment_replay_left {
            float: left;
        }
    
        .comment_replay_left img {
            width: 25px;
            height: 25px;
            border-radius: 50%;
        }
    
        .comment_replay_right {
            margin-left: 35px;
            padding-top: 2px;
        }
    
        .comment_replay_top {
            position: relative;
            margin-bottom: 6px;
        }
    
        .comment_replay_text {
            padding-right: 35px;
            margin-bottom: 10px;
            color: #555;
        }
    
        .comment_author_text span, .comment_replay_text span {
            color: #999;
            font-size: 13px;
            margin-left: 6px;
        }
    
        .shoucang1_num {
            text-align: center;
            width: 30px;
            font-size: 12px;
            /* right: -4px; */
            position: relative;
        }
    
        .comment_ul {
            height: 400px;
            overflow-y: auto;
        }
    
        .comment_input_box {
            position: fixed;
            bottom: 0;
            z-index: 2999;
            width: 100%;
            border-top: 1px solid #e8e8e8;
            background: #fff;
            padding: 10px 15px;
            box-sizing: border-box;
        }
    
        /*.comment_form {*/
        /**/
        /*}*/
    
        .comment_input {
            border: none;
            resize: none;
            width: 80%;
            float: left;
            color: #555;
            caret-color: #f44;
        }
    
        .comment_input_right {
            float: right;
        }
    
        .comment_i {
            font-size: 22px;
            color: #999;
            transition: .3s;
        }
    
        .comment_i_active {
            color: #f44;
        }
    
        .icon-zanwupinglun {
            font-size: 100px;
            color: #777;
        }
    
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }
    
        .v-enter-active,
        .v-leave-active {
            transition: all .5s ease;
        }
    
        /*添加进场效果*/
        .v-move {
            transition: all 1s ease;
        }
    
        .v-leave-active {
            position: absolute;
        }
    
        .list-complete-item {
            transition: all 1s;
            display: inline-block;
            margin-right: 10px;
        }
    
        .list-complete-enter, .list-complete-leave-to {
            opacity: 0;
            transform: translateY(30px);
        }
    
        .list-complete-leave-active {
            position: absolute;
        }
    
        .love_active {
            color: #f44;
        }
    
        /*评论样式*/
    </style>
    

     

     

    展开全文
  • 从页面响应用户点击行为,开始跳转,到新页面onload事件触发,存在一个延迟,这个延迟大概在100-300ms之间(安卓响应比ios慢些)。 这个延迟说短不短,我们可以利用这段时间,预先发起新页面所需要的网络请求。这样...
  • WeTest 导读 小程序科普类的文章已经很多了,今天这里...从页面响应用户点击行为,开始跳转,到新页面onload事件触发,存在一个延迟,这个延迟大概在100-300ms之间(安卓响应比ios慢些)。 这个延迟说短不短,我们..
  • 当乐游戏中心为玩家提供最全面的应用信息,随时随地获取香喷喷的热辣应用。 热门、最新、限免一个不落,找你想要的! 每日新品,天天不断 每日新品...优化:提升页面加载速度; 修复:安卓存档导出失败和细节上的Bug。
  • 当乐游戏中心PC端,Android+ios,两大智能手机系统强强联合,给你最佳游戏下载体验!...2. 优化页面切换加载速度;3. 优化页面缓存机制;4. 自动清除安装残留文件;5. 优化应用卸载速度;6. 实时刷新设备信息;7.
  • 图标css使用的事iconfot字体库,优化页面加载速度 http://at.alicdn.com/t/font_1048614_mi5i5ba1uag.css 组件用到了vant 中的swiper滑动组件 video原生参数介绍 h5 原生 video 属性 webkit-playsinline ios 小...
  • //加载页面完成后 对页面重新测量的回调 //这里没有使用到 //当FaiWebViewWidget 被嵌套在可滑动的 widget 中,必须设置 FaiWebViewWidget 的高度 //设置 FaiWebViewWidget 的高度 可通过在 FaiWebViewWidget ...
  • 加载优化,启动页优化;静态变量优化;电量性能优化;view控件异常销毁保存重要信息优化;去除淡黄色警告优化;使用注解替代枚举优化;glide加速优化;多渠道打包优化状态管理切换优化;TrimMemory和LowMemory优化...
  • 39、安装代码的页面在被加载时,页面链接会被第一时间推送给百度,从而提高站点内容的发现速度。 40、前后台增加产品优化标题、产品名称,更合理的产品和关键词布局。更利于关键词百度的抓取和优化。 41、...
  • 安装代码的页面在被加载时,页面链接会被第一时间推送给百度,从而提高站点内容的发现速度。 企业SEO站前台页面 企业SEO站后台管理 管理登录路经:域名/Manage/Login.Asp 初始账号:admin,初始密码:admin ...
  • 前后台增加产品优化标题、产品名称,更合理的产品和关键词布局。更利于关键词百度的抓取和优化。。 企业SEO站前台页面 企业SEO站后台管理 管理登录路经:域名/Manage/Login.Asp 初始账号:admin,初始密码:...
  • 链接成功后 会弹出配网web 如为弹出 请检查设备支持性(安卓4.4.4以上大部分支持 ios 11+)和文件系统是否上传成功! 安装库wif link tool 库 安装库本身 请保证已经安装了 arduino esp8266 sdk (已在2.7.1测试...
  • discuz x3 测试版

    2013-03-09 16:39:30
    新增 面向非智能机的低端wap版,面向iphone、安卓高端机的高端触摸版 新增 独立移动客户端(iphone/android)支持。客户端API功能更加丰富,一键生成属于自己论坛的独立客户端 新增 门户资讯页面静态化,同时支持URL...
  • 上百家授权客户在付费使用VirtualApp商业版代码,集成VirtualApp代码的APP日启动次数超过2亿次,众多安卓工程师向我们提供不同场景下的用户反馈,通过我们技术团队不断优化迭代,VirtualApp商业版代码性能更好、兼容...
  • ImgConfig是图片类,用于优化图片加载,使用的universal-image-loader-1.9.3.jar4.com.d3.d3xmpp.dao 和 com.d3.d3xmpp.model是属于MVC模式中的Model。dao负责获取数据库的数据,并返回给Activitymodel是基础数据类...
  • 让人诟病最多的恐怕就是加载 H5 页面过程中的白屏问题了。下面这张图描述了从 WebView 初始化到 H5 页面最终渲染的整个过程。 <p><img alt="image" src=...
  • 整体设计原则从产品观、用户体验、小程序规则要求和小程序开发的基础框架出发,我们的小程序大部分面向在校大学生,因此页面设计的会青春洋溢一点,从用户体验方面,优化了数据加载的动画,使其更加自然和谐,不会...

空空如也

空空如也

1 2
收藏数 37
精华内容 14
关键字:

安卓加载新页面优化