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


     1 HTML代码:

    <template> 2 <div> 3 <list class="list"> 4 <header class="myheader"> 5 <text class="myheader2">{{title}}</text> 6 </header> 7 <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'"> 8 <text class="indicator">加载更多的数据...</text> 9 </refresh> 10 <cell v-for="thecell in cellList"> 11 <div class="mycell"> 12 <image class="image" resize="cover" :src="thecell.src"></image> 13 <div class="mycella1"><text class="mycellfont1">{{thecell.username}}</text></div> 14 <div class="mycella2"><text class="mycellfont2">{{thecell.desc}}</text></div> 15 </div> 16 </cell> 17 <loading class="loading" @loading="onloading" :display="showLoading ? 'show' : 'hide'"> 18 <text class="indicator">上拉加载 ...</text> 19 </loading> 20 </list> 21 22 </div> 23 </template>

    css代码:
     1 <style>
     2   .myheader{
     3     height: 70px;
     4     background-color: #393A3F;
     5 }
     6 .myheader2{
     7     padding: 0px 0px 0px 13px;
     8     color: #FFFFFF;
     9     height: 70px;
    10     line-height: 70px;
    11 }
    12 .mycell{
    13     height: 100px;
    14     background-color: #FFFFFF;
    15     border: solid;
    16     border-left-color: #FFFFFF;
    17     border-right-color: #FFFFFF;
    18     border-top-color: #FFFFFF;
    19     border-bottom-color: #EBEBEB;
    20     position: relative;
    21     /*background-image: url("../web/assets/image/link.jpg");*/
    22 }
    23 .image {
    24     width: 80px;
    25     height: 80px;
    26   }
    27 /*.mycell img{
    28     height:85px;
    29      85px;
    30 }*/
    31 .mycella1{
    32     height: 48px;
    33     position: absolute;
    34     top:5px;
    35     left:82px;
    36     
    37 }
    38 .mycella2{
    39     /**/
    40     height: 45px;
    41     position: absolute;
    42     top:45px;
    43     
    44     left:82px;
    45 
    46 }
    47 .mycellfont1{
    48     font-size:24px;
    49     color: #2D2D2D;    
    50     
    51 }
    52 .mycellfont2{
    53     font-size:20px;
    54     color:darkgray;
    55 }
    56 .indicator {
    57         height: 40px;
    58         background-color: #FEFFD7;
    59     color: #888888;
    60     font-size: 25px;
    61     text-align: center;
    62   }
    63  .loading {
    64     justify-content: center;
    65   }
    66 </style>

    JavaScript代码:
     1 <script>
     2     const modal = weex.requireModule('modal');//用来引入对话框
     3   export default {
     4    
     5    data(){
     6        return {
     7            refreshing: false,
     8       showLoading:false,
     9            title:'微信',
    10            cellList:[
    11                    {src:'../web/assets/image/link.jpg',username:'林金桃',desc:'我先忙一下'},
    12               {src:'../web/assets/image/link.jpg',username:'正和业主之家',desc:'15-803腾生:[链接]'},
    13               {src:'../web/assets/image/link.jpg',username:'微信支付',desc:'微信支付凭证'},
    14               {src:'../web/assets/image/link.jpg',username:'京东JD.COM',desc:'索尼微单A6000低至3598元'},
    15               {src:'../web/assets/image/link.jpg',username:'订阅号',desc:'董明珠自媒体'}
    16            
    17            ]
    18            
    19        }
    20        
    21    },
    22    methods:{
    23        
    24            fetch (event) {
    25         //modal.toast({ message: 'loadmore', duration: 1 })
    26       },
    27       onrefresh (event) {
    28         //modal.toast({ message: '下拉刷新事件被触发', duration: 1 });
    29         this.refreshing = true;
    30         setTimeout(() => {
    31           this.refreshing = false;
    32         }, 2000);
    33         this.cellList.push({src:'../web/assets/image/link.jpg',username:'下来出来的新标题',desc:'这是下来更新出来描述细节信息'});
    34       },
    35       onpullingdown (event) {
    36         
    37       },
    38       onloading(){
    39           //modal.toast({ message: '上拉被触发', duration: 1 });
    40           this.showLoading=true;
    41           //模拟拉服务器的数据需要2秒
    42           setTimeout(()=> {
    43               this.showLoading=false;
    44           },2000);
    45           this.cellList.push({src:'../web/assets/image/link.jpg',username:'上拉出来的信息',desc:'这是上拉更新的信息'});
    46       }
    47    }
    48     
    49   }
    50 </script>

    实现后的一个效果图:

    下拉刷新效果图:

    上拉刷新的效果图:

    hardDream!!
    
    
    
    
    
    
    
     
    
    
    
     
  • 相关阅读:
    DOS下读取4GB内存
    开始了
    PHP函数补完:var_export()
    php 调试相关
    css选择符
    javascript的urlencode
    用CSS代码绘制三角形 纯CSS绘制三角形的代码
    Jquery 操作Cookie
    提高PHP编程效率的53种方法
    执行phpinfo();时提示:date_default_timezone_set()
  • 原文地址:https://www.cnblogs.com/aa1314/p/8119823.html
Copyright © 2020-2023  润新知