标签：lint 一点 als demo center http 语法 字符 执行
继续学习。10号参加了由官方举办的一次“技术交流沙龙”，实际上就是组办方给自己做宣传，明确了一些问题和技术需求。总而言之，本次比赛是一种开放尝试，并非与银联服务全面对接，而是要找创意，想点子，为银联商务开放平台的建设添砖加瓦。。
回到weex本身。接下来测试了list和scroller等列表元素的使用，了解了一下v-for语句的遍历方式，并加上了loading元素用来做加载效果。
list的示例代码如下：
1 <template> 2 <div class="list-box"> 3 <list class="listtest" > 4 <cell v-for="num in lists" v-bind:key="num.id"> 5 <div class="panel"> 6 <text class="te">{{num}}</text> 7 </div> 8 </cell> 9 <loading class="loadingref" @loading="onloading" :display="showLoading"> 10 <text class="indicator">Loading...</text> 11 <loading-indicator></loading-indicator> 12 </loading> 13 </list> 14 </div> 15 </template> 16 17 <script> 18 export default { 19 name: ‘list1‘, 20 data () { 21 return { 22 lists: [1, 2, 3, 4, 5], 23 showLoading: ‘hide‘ 24 } 25 }, 26 methods: { 27 onloading (event) { 28 this.showLoading = ‘show‘ 29 setTimeout(() => { 30 const length = this.lists.length 31 for (let i = length; i < length + 5; i++) { 32 this.lists.push(i + 1) 33 this.showLoading = ‘hide‘ 34 } 35 }) 36 } 37 } 38 } 39 </script> 40 41 <style scoped> 42 .list-box{ 43 align-items: center; 44 } 45 .listtest{ 46 height: 700px; 47 } 48 .panel{ 49 width: 600px; 50 height: 300px; 51 flex-direction: column; 52 justify-content: center; 53 border-width: 10px; 54 border-style: solid; 55 border-color: chocolate; 56 background-color: aquamarine; 57 } 58 .te{ 59 font-size: 50px; 60 text-align: center; 61 color: burlywood; 62 } 63 .indicator{ 64 font-size: 50px; 65 } 66 .loadingref{ 67 align-items: center; 68 } 69 70 </style>
v-for的语法类似于python的for,需要以字符串的形式输入"a in b"，其中a代表元素，b代表集合，需要注意的是此处的“元素”和“集合”都是相对于vue.js而言的，与weex的list、cell并无关系。
在es6lint语法里，v-for后面要求给一个key，不管是技术胖的代码还是weex官方的demo示例都没有这个东西，但是一直警告（反映在webStorm里最后全都写成error,虽然不影响渲染），于是随便翻了翻然后找了个网上的方法填了进去，即代码中的v-bind:key="num.id".效果见右图：
主体代码的内容主要来自技术胖教程，需要注意的是loading元素，该元素不太好用，经常拉着拉着，就退不回去了（或者退不完全），而list和scroller本身还有loadmore事件来进行进一步加载。
而loadmore则比较难做出loading的加载动画效果，只能用toast凑合。
接下来是scroller示例，采用了loadmore事件：
1 <template> 2 <div class="scroller-box"> 3 <scroller class="scroller" @loadmore="onloadmore" :loadmoreoffset="10"> 4 <div class="cell" v-for="num in lists" v-bind:key="num.id"> 5 <div class="panel"> 6 <text class="text">{{num}}</text> 7 </div> 8 </div> 9 <!-- 10 <loading class="loading" @loading="onloading" :display="loadinging ? ‘show‘ : ‘hide‘"> 11 12 <text class="indicator-text">Loading ...</text> 13 <loading-indicator class="indicator"></loading-indicator> 14 </loading> 15 --> 16 </scroller> 17 18 </div> 19 20 </template> 21 22 <script> 23 const modal = weex.requireModule(‘modal‘) 24 export default { 25 data () { 26 return { 27 loadinging: false, 28 lists: [1, 2, 3, 4, 5] 29 } 30 }, 31 methods: { 32 /* 33 onloading (event) { 34 this.loadinging = true 35 setTimeout(() => { 36 const length = this.lists.length 37 for (let i = length; i <= length + 4; i++) { 38 this.lists.push(i + 1) 39 // this.lists = this.lists.concat(i + 1) 40 } 41 this.loadinging = false 42 }, 500) 43 } 44 */ 45 46 onloadmore (event) { 47 setTimeout(() => { 48 modal.toast({message: ‘loading‘, duration: 0.6}) 49 const length = this.lists.length 50 for (let i = length; i < length + 5; i++) { 51 // this.lists.push(i + 1) 52 this.lists = this.lists.concat(i + 1) 53 } 54 }, 500) 55 } 56 57 } 58 } 59 </script> 60 61 <style scoped> 62 .scroller-box{ 63 height: 700px; 64 } 65 66 .scroller { 67 width: 750px; 68 show-scrollbar: false; 69 } 70 .loading { 71 width: 750px; 72 display: -ms-flex; 73 display: -webkit-flex; 74 display: flex; 75 -ms-flex-align: center; 76 -webkit-align-items: center; 77 -webkit-box-align: center; 78 align-items: center; 79 } 80 .indicator-text { 81 color: #888888; 82 font-size: 42px; 83 text-align: center; 84 } 85 .indicator { 86 margin-top: 16px; 87 height: 40px; 88 width: 40px; 89 color: blue; 90 } 91 .panel { 92 width: 600px; 93 height: 250px; 94 margin-left: 75px; 95 margin-top: 35px; 96 margin-bottom: 35px; 97 flex-direction: column; 98 justify-content: center; 99 border-width: 2px; 100 border-style: solid; 101 border-color: #DDDDDD; 102 background-color: #F5F5F5; 103 } 104 .text { 105 font-size: 50px; 106 text-align: center; 107 color: #41B883; 108 } 109 </style>
loading和toast的效果比较难捕捉，就不放了。
接下来准备尝试网络通信，这个功能主要通过weex的stream组件的fetch方法来完成。https://weex.apache.org/zh/docs/modules/stream.html
然后最坑的地方就来了，很明显是阿里不够用心（
（这是weex文档里给出的函数说明，可以看到，有三个参数）而不论是weex自己的demo(比如http://dotwe.org/vue/892bd1c977b61762baca8e02a65b6d97?spm=a2c7j.-zh-docs-modules-stream.0.0.6c5c5b72hzpNfl）或者技术胖的视频，都显示出fetch方法只有两个参数，而且本身webStorm的参数错误提示又是下面画一条很软的虚线，导致本人很久很久才发现（
其实可以看到，这第三个参数progressCallback的解释都还是英文，很明显是后加的，但是自己的demo都没有完全跟上(http://dotwe.org/vue/a6e1a234170fadb20a6f334042a6427b比如这个demo就有第三个参数了），真是笨死啦。
（此处再额外吐槽一下官方的很多demo都有着const self=this这样的写法。。）
个人补充了下官方的解释：
fetch(options, callback, progressCallback)
@options:请求的配置选项
@callback:响应结果回调，即获得请求的返回结果
@progressCallback:进程中相应，即在请求过程中执行的一个函数，可以获得当前的请求状态
后两个获得的内容都是放在对应回调函数的形参（请原谅我只会用这个词来理解）里的。
但是jspang的json服务器已经关咯，weex的demo也一点也没法用。。只能求助各路大神。。比如这个：https://www.cnblogs.com/sunjianfei/p/7298950.html
标签：lint 一点 als demo center http 语法 字符 执行
原文地址：https://www.cnblogs.com/aitashi/p/11846344.html
