HTML5 App商业开发实战教程——基于WeX5可视化开发 4.5 列表组件 4-7 实现案例：单列列表 教学案例.docVIP

HTML5 App商业开发实战教程教学案例 一、功能简介 动态页中的商品图片列表是一个单列列表，用来显示商品图片。列表支持上滑加载更多和下拉刷新。 二、创建或搜集相关信息 搜集单位：H5创新学院 搜集时间：2016-8-24 来源：原创 三、适用对象 学生、教师、及H5 App开发人员、相关技术人员等。 四、程序代码 添加list组件使用单列列表，添加scrollview组件实现上滑和下拉两个手势，W文件的源代码如下： div class=x-panel-content x-scroll-view xid=content6 style=bottom: 0px; _xid=C7328292F0600001F12CEFF31A708EE0 div class=x-scroll component=$UI/system/components/justep/scrollView/scrollView xid=scrollView1 div class=x-content-center x-pull-down container xid=div1 i class=x-pull-down-img glyphicon x-icon-pull-down xid=i5/ span class=x-pull-down-label xid=span5下拉刷新.../span /div div class=x-scroll-content xid=div2 div component=$UI/system/components/justep/list/list class=x-list panel-body xid=list1 data=goodsData limit=3 ul class=x-list-template xid=listTemplateUl1 li xid=li1 class=text-center img src= alt= xid=image1 bind-attr-src=val(quot;fImgquot;) style=width:100%;/ /li /ul /div /div div class=x-content-center x-pull-up xid=div3 span class=x-pull-up-label xid=span6加载更多.../span /div /div /div 五、运行结果