利用vue.js加weex的相关插件实现微信的一个简单页面

HTML代码：

<template>
  <div>
      <list class="list">
          <header class="myheader">
              <text class="myheader2">{{title}}</text>
          </header>
          <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
          <text class="indicator">加载更多的数据...</text>
        </refresh>
          <cell v-for="thecell in cellList">
              <div class="mycell">
                   <image class="image" resize="cover" :src="thecell.src"></image>
                  <div class="mycella1"><text class="mycellfont1">{{thecell.username}}</text></div>
                    <div class="mycella2"><text class="mycellfont2">{{thecell.desc}}</text></div>
              </div>
          </cell>
          <loading class="loading" @loading="onloading" :display="showLoading ? 'show' : 'hide'">
          <text class="indicator">上拉加载 ...</text>
        </loading>
      </list>
      
  </div>
</template>

css代码：

<style>
  .myheader{
    height: 70px;
    background-color: #393A3F;
}
.myheader2{
    padding: 0px 0px 0px 13px;
    color: #FFFFFF;
    height: 70px;
    line-height: 70px;
}
.mycell{
    height: 100px;
    background-color: #FFFFFF;
    border: solid;
    border-left-color: #FFFFFF;
    border-right-color: #FFFFFF;
    border-top-color: #FFFFFF;
    border-bottom-color: #EBEBEB;
    position: relative;
    /*background-image: url("../web/assets/image/link.jpg");*/
}
.image {
    width: 80px;
    height: 80px;
  }
/*.mycell img{
    height:85px;
     85px;
}*/
.mycella1{
    height: 48px;
    position: absolute;
    top:5px;
    left:82px;
    
}
.mycella2{
    /**/
    height: 45px;
    position: absolute;
    top:45px;
    
    left:82px;

}
.mycellfont1{
    font-size:24px;
    color: #2D2D2D;    
    
}
.mycellfont2{
    font-size:20px;
    color:darkgray;
}
.indicator {
        height: 40px;
        background-color: #FEFFD7;
    color: #888888;
    font-size: 25px;
    text-align: center;
  }
 .loading {
    justify-content: center;
  }
</style>

JavaScript代码：

<script>
    const modal = weex.requireModule('modal');//用来引入对话框
  export default {
   
   data(){
       return {
           refreshing: false,
      showLoading:false,
           title:'微信',
           cellList:[
                   {src:'../web/assets/image/link.jpg',username:'林金桃',desc:'我先忙一下'},
              {src:'../web/assets/image/link.jpg',username:'正和业主之家',desc:'15-803腾生:[链接]'},
              {src:'../web/assets/image/link.jpg',username:'微信支付',desc:'微信支付凭证'},
              {src:'../web/assets/image/link.jpg',username:'京东JD.COM',desc:'索尼微单A6000低至3598元'},
              {src:'../web/assets/image/link.jpg',username:'订阅号',desc:'董明珠自媒体'}
           
           ]
           
       }
       
   },
   methods:{
       
           fetch (event) {
        //modal.toast({ message: 'loadmore', duration: 1 })
      },
      onrefresh (event) {
        //modal.toast({ message: '下拉刷新事件被触发', duration: 1 });
        this.refreshing = true;
        setTimeout(() => {
          this.refreshing = false;
        }, 2000);
        this.cellList.push({src:'../web/assets/image/link.jpg',username:'下来出来的新标题',desc:'这是下来更新出来描述细节信息'});
      },
      onpullingdown (event) {
        
      },
      onloading(){
          //modal.toast({ message: '上拉被触发', duration: 1 });
          this.showLoading=true;
          //模拟拉服务器的数据需要2秒
          setTimeout(()=> {
              this.showLoading=false;
          },2000);
          this.cellList.push({src:'../web/assets/image/link.jpg',username:'上拉出来的信息',desc:'这是上拉更新的信息'});
      }
   }
    
  }
</script>

实现后的一个效果图：

下拉刷新效果图：

上拉刷新的效果图：

hardDream!!