精华内容
下载资源
问答
  • 第一步,在App.vue文件下加入keep-alive刚开始我也是看的网上但是大多数是这样的一开始我也是按照这样来的后面发现从列表页跳转到列表详情页的时候再返回第一次是没问题的,但是你点击其他列表跳到详情页的时候,...

    第一步,在App.vue文件下加入keep-alive

    刚开始我也是看的网上但是大多数是这样的

    一开始我也是按照这样来的后面发现从列表页跳转到列表详情页的时候再返回第一次是没问题的,但是你点击其他列表跳到详情页的时候,详情页面还是前面的那个详情页面,从列表页传来的参数也没变化,后面就把下面那个判断删除才可以了,所以这里看自己项目需求

    第二步 在路由文件中 :router/index.js,给被要被缓存的页面设置 meta 属性(这里就是列表页),不需要缓存的视图,不用添加

    {

    path: 'management',

    name: 'Management',

    component: Management,

    meta:{

    keepAlive: true //此页面需要缓存

    }

    }

    第三步,在详情页里面设置 beforeRouteLeave

    beforeRouteLeave(to,from,next){

    //设置下一个路由的meta,让列表页面缓存,即不刷新

    to.meta.keepAlive = true

    next()

    }

    第四步, 实现滚动行为的代码:router/index.js

    scrollBehavior(to,from,savePosition){

    if(savePosition){

    //解决页面从列表页跳转到详情页返回,初始在原来位置

    return savePosition

    }else{

    //解决页面跳转后页面高度和前一个页面高度一样

    return {x:0,y:0}

    }

    }

    这样我们就把这个需求给解决了。

    展开全文
  • 微信小程序的一个典型列表页面

    万次阅读 多人点赞 2019-08-04 10:11:44
    wxml <import src="../templete/templete" /> <view class="content"> <view class="img"> <image src="../images/haibao/haibao-1.jpg" style="width:100%;height:230px;......

    wxml

    <import src="../templete/templete" />
    <view class="content">
    <view class="img">
    <image src="../images/haibao/haibao-1.jpg" style="width:100%;height:230px;"></image>
    </view>
    
    <view class="nav">
    <view class="nav-item">
    <view><image src="../images/icon_type.png" style="height:25px;width:23px"></image></view>
    <view>菜谱分类</view>
    </view>
    <view class="nav-item">
    <view><image src="../images/icon_type.png" style="height:25px;width:23px"></image></view>
    <view>菜谱分类</view>
    </view>
    <view class="nav-item">
    <view><image src="../images/icon_type.png" style="height:25px;width:23px"></image></view>
    <view>菜谱分类</view>
    </view>
    <view class="nav-item">
    <view><image src="../images/icon_type.png" style="height:25px;width:23px"></image></view>
    <view>菜谱分类</view>
    </view>
    </view>
    <view class="hr"></view>
    <view class="head">
    <view>香哈头条</view>
    <view class="right">></view>
    </view>
    <view class="list">
    <template is="cooks" data="{{array}}" />
    </view>
    </view>
    

    其中使用了模板
    在项目中引入模板

    模板的内容定义

    <template name="cooks">
    <block wx:for="{{array}}">
      <view class="item" bindtap="seeDetail" id="0">
        <image src="{{item.img}}" style="width:75px;height:58px;"></image>
    
      <view class="desc">
        <view class="title">{{item.title}} </view>
        <view class="count">
          <view>{{item.type}}</view>
          <view class="liulan">{{item.liulan}}</view>
          <view class="pinglun"> {{item.pinglun}}</view>
        </view>
      </view>
    </view>
      <view class="hr2"></view>
    </block>
    </template>
    

    wxss

    /**index.wxss**/
    .nav{
      display: flex;
      flex-direction: row;
      text-align:center
    }
    .nav-item{
      width: 25%;
      margin-top:20px;
      font-size: 12px;
    }
    .hr{
      height: 5px;
      background-color: #cccccc;
      margin-top: 10px;
      opacity: 0.2
    }
    .head{
      display: flex;
      flex-direction: row;
      margin: 10px;
      font-size: 13px;
      color: #999999
    }
    .right{
      position: absolute;
      right: 10px;
      color: #cccccc
    }
    .hr2{
      height: 2px;
      background-color: #cccccc;
      opacity: 0.2;
    
    }
    .item{
      display: flex;
      flex-direction: row;
      margin-left: 10px;
      margin-bottom: 5px;
    }
    .desc{
      margin-left: 20px;
      line-height: 30px;
    }
    .title{
      font-weight: bold;
    }
    .count{
      display: flex;
      flex-direction: row;
      font-size: 12px;
      color: #999999
    }
    .liulan{
      position: absolute;
      right: 50px;
    }
    .pinglun{
      position: absolute;
      right: 10px;
    }
    

    js

    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
        array:[]
      },
      onLoad:function(){
        var array = this.iniData();
        this.setData({array:array});
      },
      iniData:function(){
        var array=[];
        var object1 = new Object();
        object1.img="../images/haibao/haibao-1.jpg";
        object1.title="爱心早餐";
        object1.type="健康养生";
        object1.liulan="20926浏览";
        object1.pinglun = "7评论"
    
        array[0] =object1;
        array[1] =object1;
        array[2] = object1;
        array[3] = object1;
        return array;
      }
     
    })
    

    预览界面

    在这里插入图片描述

    参考资料:微信小程序开发图解案例教程

    展开全文
  • 三级列表页什么 列表页是京东商城的三大核心系统之一。京东三级列表页是用户选取商品类型后,展示同类商品的页面,具体如下图表示:如何进入三级列表页 用户在首页左侧的导航中(如下图所示)、全部商品分类...

    三级列表页是什么
    列表页是京东商城的三大核心系统之一。京东三级列表页是用户选取商品类型后,展示同类商品的页面,具体如下图表示:

    这里写图片描述

    如何进入三级列表页
    用户在首页左侧的导航中(如下图所示)、全部商品分类列表页或者顶部面包屑导航中,选择到商品的最小类别后,就可以到达三级列表页
    这里写图片描述

    三级列表页的作用
    该页面根据用户选择的商品类目进行检索,将结果以列表展现在页面上。是用户快速的找到自己需要的产品,提高用户购买转化率。

    三级列表页的业务特点
    涉及到多维度多因子质量分综合排序,排序质量的效果直接关系到转化率,客单价,进而影响到GMV,实质上是数据挖掘和机器学习技术在海量数据上的应用。
    在不同三级类目下,通过复杂不确定的查询条件、属性区域和列表查询结构的实时联动,以及跟区域相关的库存、京东配送、货到付款等复杂业务逻辑下,坐到高并发实时计算。

    优化原因
    三级列表页的页面周围依赖的内部系统太多,要做到异步化展示,阻塞可降级。
    在持续开发一个核心系统过程中,除了满足业务需求外,还应该考虑系统未来的架构,追求极致的系统的可用性、高性能和稳定性。这个过程是一个长期积累和重构的过程,京东三级列表页的优化工作,就是这个过程的一部分。

    优化前的状况
    优化前的三级列表页有一下特点:
    1.基于搜索实现。
    2.全量数据,搜索结构不理想。
    3.接口相应时间长,影响了用户体验。
    4.没法针对数据做二次优化。
    5.转化率相对较低。
    基于以上原因,需要对三级列表页做出改变,也就是对老版本进行重构。

    重构版本目的
    通过优化,希望达到以下目的:
    1.非全量数据,线下异步根据数据模型进行筛选部分最优数据。
    2.要求实时过滤计算,接口响应时间要快,保证用户体验。
    3.数据进行优化,提高转换率,提高GMV。
    4.实现前端降级和异步模块出错上报。

    优化原则
    每个应用都要满足自己特定的需求,因为其商业条件、应用场景、用户期望,以及功能复杂性各不相同。尽管如此,如果应用必须对用户作出响应,那我们就必须从用户角度来考虑可感知的处理时间这个常量。事实上,虽然生活节奏越来越快(至少我们感觉如此),但人类的感知和反应时间则一直都没有变过:
    下面这个表格展示了Web性能社区总结的经验法则:必须在250ms渲染页面,或者至少提供视觉反馈,才能保证用户不走开。如果想让人感觉很快,就必须在几百ms内相应用户操作。超过1s,用户的预期流程就会中断,心思就会向其他任务转移,而超过10s,除非你有反馈,否则用户基本上就会终止任务!

    这里写图片描述
    此次的优化工作遵循一下四个原则:
    1.首屏优先:精简和瘦身页面,首屏优先展示出来;
    2.惰性交互:需用户交互的部分惰性加载;
    3.惰性执行:能不执行的先别执行,惰性执行;
    4.惰性滚屏:滚动惰性加载。

    主要优化工作
    (1)首屏优先
    为了保证首屏优先展示,HTML文档进行了适当精简。
    目的:尽快渲染出页面并达到可交互的状态。
    方法:
    1.如果非必须,尽量只生成首屏需要的HTML数据。
    2.优先获取资源,提前解析。如首屏需要的CSS和JS;如果不考虑维护成本,可以把首屏需要的CSS和JS放到文档中。
    3.发现和优化安排网络资源,尽早分派请求并取得页面。
    4.文档精简后,服务端生成程序耗时短,性能才回好。

    如下图所示,列表页的头、面包屑、品牌区、属性筛选区、60个商品主图数据,这些是服务端模版渲染输出;而剩余部分是在前端js惰性加载或生成。
    这里写图片描述
    (2)惰性交互
    惰性交互,即对需用户交互的部分进行惰性加载。
    对于三级列表品牌区,服务端只渲染18个品牌,用户在点更多时,AJAX异步加载其他的。对于整个属性是筛选区服务端只渲染5行,其他行用户在点更多时,js从文档嵌入资源中取得数据,并渲染成HTML。这样做可以保证服务端计算量少,提升服务端性能,较少数据传输。
    如下图:点“更多”时才加载更多的品牌,因为有些三级类目有许多品牌,如果不采用这种方式,整个页面渲染非常慢。
    这里写图片描述
    (3)惰性执行
    能不执行的先别执行,惰性执行。
    上图是三级列表页最重要的商品区(商品主图+N个关联商品小图),每个商品的区域都是完全一样的;如果在服务端拼装整个商品区域的话,尤其涉及到小图部分,会有非常多的重复HTML元素。
    这里写图片描述
    我们把体验和减少页面内容进行了折中处理:服务端渲染输出商品主图部分;小图部分通过Json数据嵌入到页面,然后通过js惰性执行渲染。这样可以很好地对页面进行瘦身。而且小图资源是页面嵌入的,非异步加载;没有网络请求。因此,用户基本感知不到异步带来的渲染闪动问题。
    (4)惰性滚屏
    三级列表页的60个商品区域的图片和页尾都是当用户向下滚动页面时,才去加载当前屏幕中的图片和模块。这样可以节省服务器带宽和压力,提升页面整体渲染时间。
    细节优化工作
    在实际优化过程中,还涉及到非常多的优化细节。
    讲一些JS/CSS资源直接嵌入页面
    把资源嵌入闻到那股可以减少请求的次数。比如页面需要的JS、CSS数据。如下图所需:
    这里写图片描述
    上图中的那些JS对象,是后端渲染输出的,因此不适合放入单独的JS文件,直接在页面中嵌入输出会更好些。slaveWareList是小图的列表对象。如果放在服务端渲染输出的话,首先需要进行一些循环拼装页面;另外会使页面体积变得非常大。
    权衡之后决定放到前端JS渲染输出。这样也带来了一些好处:
    1.减轻服务端压力,提升渲染模版性能和减少服务端执行时间;
    2.服务端不用生成HTML,文档减少上百个DIV,减少页面大小和网络开销。
    3.提前放到HTML中,不用异步调用。
    4.用户基本感知不到渲染过程。
    对引入的资源排定优先次序
    根据自己系统的业务,对每种资源定优先级:对必需的资源有限加载。而低优先级的请求保存在队列中延时加载或等待必须资源加载完成再加载;如:搜索推荐热词、顶部三个热卖商品接口、60个主商品的图片、价格有限加载。而对于库存、促销信息、广告词、预售商品、店铺信息等。延后加载。对于点击流,广告统计数据则延时两秒再加载。
    应用JS缓存来存储公有属性和商品信息属性
    三级列表页中的每个商品都是一个对象。存放在一个Map中,通过AJAX接口异步填充和维护商品的属性。用于后续用户交互用。同时维护成本也会降低;即页面中的每个商品数据放入一个Map中,如果没有则异步加载;如果没有则异步加载;如果有直接使用;即这些数据是公共数据。
    这里写图片描述
    AJAX接口最优调用
    页面往往依赖很多的异步接口,因此要对异步接口进行压测,找出接口的最优调用方式。如京东三级列表页依赖价格、库存、广告词、店铺信息等异步调用接口。而页面有时候会出现多达300多个商品,如果用一个get请求把这些sku做参数,性能非常慢,那么就采取分组分批调用。如页面商品在300个时,价格接口分六组,第一组30个,第二组30个,第三组60个,第四组60个,第五组100个,第六组100个。
    DNS预解析
    对可能的域名进行提前解析,避免将来HTTP请求时的DNS延迟。如对价格、库存、图片、单品页等服务预解析。
    这里写图片描述
    减少HTTP重定向
    HTTP重定向极费时间,特别是不同域名之间的重定向,更加费时;这里面既有额外的DNS查询、TCP握手,还有其他延迟。最佳的重定向次数为零。比如三级列表页以前是http://list.jd.com/9987-653-655.html,而现在是http://list.jd.com/list.html?cat=9987,653,655;在过渡期间可以重定向,但是过渡完成后就没必要重定向了。
    使用CDN(内容分发网络)
    把数据放到离用户地理位置更近的地方,可以显著减少每次TCP链接的网络延迟,增大吞吐量。比如京东三级列表页、商品详情页、公告JS、CSS
    传输压缩过的内容(Gzip压缩)
    传输前应该压缩应用资源,把要传输的字节减至最少;确保每种要传输的资源采用最好的压缩手段。所有文本资源都应该使用Gzip压缩,然后再在客户端和服务端间传输。一般来说,Gzip可以减少60%~80%的文件大小,也是一个相对简单(只要在服务端上配置一个选项),但优化效果较好的举措。(对于压缩级别,经过不同服务器的多次压测,建议Nginx设置为1-4)
    去掉不必要的资源
    任何请求都不如没有请求快,把一些非必须的或者可异步的,或者可延迟的尽量延迟请求。

    展开全文
  • vue项目实现从商品列表页跳转详情页后,返回列表页保持页面在原位置,且列表页刷新的方法 页面跳转后回退保持原位置 App.vue页面中使用keep-alive缓存组件 <template> <div id="app"> <keep-alive ...

    vue项目实现从商品列表页跳转详情页后,返回列表页保持页面在原位置,且列表页刷新的方法

    页面跳转后回退保持原位置

    App.vue页面中使用keep-alive缓存组件

    <template>
      <div id="app">
        <keep-alive >
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </template>
    

    路由配置里 在需要被缓存的页面meta里配置keepAlive属性

     {
          path: '/index',
          name: 'index',
          
          meta: {
            title: ' ',
            keepAlive: true,//此组件需要被缓存
          },
          component: () => import('@/components/index'),
        },
    

    实现页面回退之后重新加载,与methods平级写beforeRouteLeave钩子函数,表示在路由页面离开时执行,将该页面的keepAlive属性设为false

     beforeRouteLeave (to, from, next) { 
            from.meta.keepAlive = false;
            next();
     },
    

    在详情页配置,页面返回时设置列表页keepAlive为true

       beforeRouteLeave (to, from, next) {
            if (to.path == "/index") {
                to.meta.keepAlive = true;
            } else {
                to.meta.keepAlive = false;
            }
            next();
        },
    
    展开全文
  • 最近公司有个移动端H5的项目,是前后端分离的,所以前端就Vue + Vux来做,项目是用vue-cli3生成的,其中就有这样的一个需求,在新闻列表页中向下滑动后,随别打开一个新闻,进入该新闻的详情页面,当看完后,从...
  • 如何快速开发H5列表页面

    千次阅读 2019-07-11 10:24:03
    拿到这个任务我们首先要进行需求分析,由于是在微信公众号也就是手机里面的H5列表,所以就不可能像PC上的列表页面那样进行分页处理,应该按照手机列表常用的上拉刷新,下拉重新加载的方式实现。所以这个任务主要实现...
  • 网页列表页面展示

    千次阅读 2018-09-16 15:36:28
    列表页面展示 需求: 将友情链接页面通过列表展示出来 技术分析: 列表标签 列表标签: &lt;ol&gt;&lt;/ol&gt; 有序 &lt;ul&gt;&lt;/ul&gt; 无序 ...
  • 被忽略的移动端列表页设计

    千次阅读 2017-03-13 23:52:53
    一、列表页什么? 在《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第六章中有这样一段话:列表页是一个由若干可选择对象所组成的队列。 在手机端,列表页是一个很常见的组件,它是...
  • -- // keep-alive 查询列表页面查看详情页面时,详情页面返回以后,查询列表页面的查询参数等数据全部缓存,重新查询时重新刷新获取数据。--> <keep-alive> <router-view v-if="$route.meta.keepAlive...
  • pc端自适应页面之新闻列表页

    千次阅读 2017-08-21 11:35:14
    近两天做了个PC端自适应列表页,遇到颇多麻烦。 首先让我们一起来分析下页面页面是左右结构的,左边是菜单,右边才是列表,然而问题来了,请看图这便是页面布局,还要考虑自适应,首先,左侧的导航不用说,那我们来...
  • 京东三级列表页持续架构优化

    千次阅读 2016-08-12 14:09:23
    本文作者,王向维,京东商城...三级列表页什么 列表页是京东商城的三大核心系统之一。京东三级列表页是用户选取商品类型后,展示同类商品的页面,具体如下图所示。 如何进入三级列表页 用户在首页左侧的导航树中(如
  • Vue项目实战:订单列表页面实现

    千次阅读 2020-04-09 18:10:16
    订单列表数据渲染 Loading 和 NoData优化 订单列表分页 - 分页器 订单列表分页 - 加载更多 订单列表分页 - 滚动加载 (1)调整Order父组件结构(解决Bug) 之前在Vue项目实战:订单确认页面实现中关于订单父组件...
  • 1.设置cookie缓存 //设置cookie Vue.prototype.setCookie = function (name, value, day) { if (day !== 0) { var expires = day * 24 * 60 * 60 * 1000; var...
  • 需求描述 ...列表页dom挂载完成后,判断路由是否有hash,若有页面定位到对应hash的列表项。 <template> <div> <ul> <li v-for="item in list" :key="item.id" :id=...
  • 网站列表页 不显示 调用的数据 如图所示 解决办法: 按图中指示 勾选上 然后保存 最后记得更新缓存,重新生成栏目 还是没解决,可以加我 微939335204 ...
  • 图片列表页面的加载优化

    万次阅读 2020-05-18 11:10:21
    源于文件拍照的列表页预览图,由于图片过大,后端设计时又没有考虑到略缩图的设计,原图片加载时会有加载到一半图片截断的显示效果,为避免这种显示问题,决定使用默认图片填充和js隐式加载图片的方式。 方案 1.为每...
  • 一篇非常详细直白的博文推荐: ...从a列表的详情页面 直接点击左侧菜单栏 进入b/c列表 显示的还是缓存的a列表以及状态 需要在详情页路由离开之前做处理: beforeRouteLeave(to, from, next){ if...
  • UI设计列表页面设计几大原则

    千次阅读 2019-05-30 16:24:12
    今天苏州学码思小编给大家讲下UI设计界面中的列表页设计,看起来很普通和设计元素了,就是这简单又普又通的列表却困恼了无数设计师。让设计师又爱又恨,怎么样才可以更好地展示它们呢?  先来看看列表设计的形式吧...
  • ionic 列表页+详细页面Demo示例

    千次阅读 2017-02-10 17:52:27
    一、引用 二、主页模板 三、列表页模板 http://www.gongjuji.net http://www.baidu.com
  • 使用element UI 快速制作一个列表页面

    万次阅读 2018-10-30 14:54:00
    使用element制作一个列表页面,并且当点击“查看调查问卷”时弹出弹框。 1. 制作一个名叫DataListTable &amp;amp;amp;lt;DataListTable v-show=&amp;amp;quot;showTable&amp;amp;quot; :list=&amp...
  • 经常有这样的功能,从列表页上选择一项,跳到详细页,详细页看完,返回列表页。这时,列表页的组件会重新创建,也就是要重新从接口请求一次数据,并且会回到第一行,对于数据更新要求不高的业务来说,这样会浪费资源...
  • vue列表页分页

    千次阅读 2019-04-29 22:28:46
    console.log(`当前: ${currentPage}`); this.setPageNum(currentPage); // this.getDataApi(pageNumber,pageSize) }, handleSizeChange(currentSize) { console.log(`每 ${currentSize} 条`); this....
  • 在用bootstrap进行开发的时候,遇到了一点问题,如图,我本来在第三,然后选中一条数据,点击详情,进入详情页面,但是在详情页面点击返回之后,这个列表就回到了第一,如果想继续之前的工作,就需要手动转到第...
  • PHPCMS V9 列表页调用任意文章内容

    千次阅读 2016-07-29 09:59:20
    一、PHPCMS V9 列表页调用第一篇文章内容 {pc:content action="lists" catid="$catid" order="id ASC" num="1" moreinfo="1"} {loop $data $v} {$v['title']} {$v['content']} {/loop} {/pc} moreinfo="1" 调用副表...
  • 新增编辑页是列表页的二级路由 在新增或编辑后列表页不刷新相应的数据 在父路由中:加一个@refresh="getKnowledgeList",自定义方法,传到子路由上,其中绑定的方法为获取列表页的数据方法 <template> <...
  • MUI列表页面打开详细页面的方式

    千次阅读 2017-10-23 21:17:26
    推荐使用MUI examples中list.html页面中的方式,该方式简要代码如下:mui... id: id, url: this.href, styles: webview_style, show: { aniShow: aniShow }, waiting: { autoShow: false //显示正在加载图标,fa
  • 织梦列表页分页样式和调用

    千次阅读 2018-11-05 17:16:12
    效果图: 代码: &lt;style&gt; .pagess { clear: both; height: 30px; margin: 20px; overflow: hidden; margin-left: 0px; text-align: center; } ... display: inline-b...
  • 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
  • 制作一个简单的文章列表页面样式

    千次阅读 2018-04-20 17:39:36
    仿制了一个简单的文章列表页面样式&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; *{ margin:0; padding:0; ...
  • 一、问题 新增需求,点击浏览器返回按钮或者详情页的返回按钮,需要返回列表页,并保存之前所有的状态。 二、经过 ...详情页通过 this.$route.params 信息判断是哪个列表页传过来的,并给二级页面传...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,222,546
精华内容 489,018
关键字:

列表页是什么