• 基于ColorUi-uniapp的一个列表实例


    1.页面样式

    2.新建一个uniapp项目,导入ColorUi-nuiapp模板(https://ext.dcloud.net.cn/plugin?id=239

    3.导入list组件(https://ext.dcloud.net.cn/plugin?id=24

    4.列表页面代码

      1 <!--
      2   文件描述:绑定用户列表实例
      3   创建时间:2020/1/19 10:57
      4   创建人:Administrator
      5 -->
      6 <template>
      7   <view class="modelpage-list">
      8     <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      9       <block slot="backText">返回</block>
     10       <block slot="content">{{pageTitle}}</block>
     11     </cu-custom>
     12 
     13 
     14     <uni-list class="listview" :enableBackToTop="true" :scroll-y="true" @scrolltolower="loadMore">
     15       <uni-refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
     16                    :display="refreshing ? 'show' : 'hide'">
     17         <div class="refresh-view">
     18           <image class="refresh-icon" :src="refreshIcon" :style="{ (refreshing || pulling) ? 0: '32px'}"
     19                  :class="{'refresh-icon-active': refreshFlag}"></image>
     20           <uni-load-more v-if="refreshing" class="loading-icon" status="loading"
     21                          :contentText="loadingMoreText"></uni-load-more>
     22           <text class="loading-text">{{refreshText}}</text>
     23         </div>
     24       </uni-refresh>
     25 
     26       <uni-cell v-for="(item, index) in dataList" :key="item.id">
     27         <div class="userlist-item">
     28           <view class="cu-list menu-avatar comment solids-top">
     29             <view class="cu-item">
     30               <view class="cu-avatar round"
     31                     style="background-image:url(https://pic4.zhimg.com/80/v2-63c1ab1cf6530b25cc38788a4f532789_hd.jpg);"></view>
     32               <view class="content">
     33                 <view class="">
     34                   <span class="text-xl text-bold">{{item.name}}</span>
     35                 </view>
     36                 <view class="cuIcon-phone text-content text-df margin-top-sm text-blue">
     37                  {{item.phonenumber}}
     38                 </view>
     39                 <view class="radius text-sm margin-top-sm">
     40                   <view>{{item.explicitaddress}}</view>
     41                 </view>
     42                 <view class="margin-top-sm flex justify-between">
     43                   <view class="cuIcon-time text-gray text-df"> {{item.createDate}}</view>
     44                 </view>
     45               </view>
     46             </view>
     47           </view>
     48         </div>
     49       </uni-cell>
     50       <uni-cell v-if="isLoading && !isFinished">
     51         <view class="loading-more">
     52           <text class="loading-more-text">{{loadingText}}</text>
     53         </view>
     54       </uni-cell>
     55       <uni-cell v-if="isFinished">
     56         <view class="loading-more">
     57           <text class="loading-more-text">已加载全部数据</text>
     58         </view>
     59       </uni-cell>
     60     </uni-list>
     61 
     62     <no-data class="no-data" v-if="isNoData" @retry="loadMore"></no-data>
     63   </view>
     64 </template>
     65 
     66 <script>
     67 // 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
     68 // 例如:import 《组件名称》 from '《组件路径》';
     69 // 例如:import uploadFile from '@/components/uploadFile/uploadFile'
     70 import uniList from '@/components/uni-list.vue';
     71 import uniCell from '@/components/uni-cell.vue';
     72 import uniRefresh from '@/components/uni-refresh.vue';
     73 import uniLoadMore from '@/components/uni-load-more.vue';
     74 import noData from '@/components/nodata.nvue';
     75 
     76 export default {
     77   name: 'userlist',
     78   // import引入的组件需要注入到对象中才能使用
     79   components: {
     80     uniList,
     81     uniCell,
     82     uniRefresh,
     83     uniLoadMore,
     84     noData
     85   },
     86   data () {
     87     // 这里存放数据
     88     return {
     89       requestParams: {
     90         page: 1,
     91         limit: 10
     92       },
     93       banner: {},
     94       pageTitle: '绑定用户列表',
     95       page: 1,
     96 
     97       dataList: [],
     98       navigateFlag: false,
     99       pulling: false,
    100       refreshing: false,
    101       refreshFlag: false,
    102       refreshText: "",
    103       isLoading: false,
    104       loadingText: '加载中...',
    105       isFinished: false,
    106       isNoData: false,
    107       angle: 0,
    108       loadingMoreText: {
    109         contentdown: '',
    110         contentrefresh: '',
    111         contentnomore: ''
    112       },
    113       refreshIcon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5QTFRFcHBw3Nzct7e39vb2ycnJioqK7e3tpqam29vb////D8oK7wAAAAp0Uk5T////////////ALLMLM8AAABxSURBVHja7JVBDoAgDASrjqj//7CJBi90iyYeOHTPMwmFZrHjYyyFYYUy1bwUZqtJIYVxhf1a6u0R7iUvWsCcrEtwJHp8MwMdvh2amHduiZD3rpWId9+BgPd7Cc2LIkPyqvlQvKxKBJ//Qwq/CacAAwDUv0a0YuKhzgAAAABJRU5ErkJggg=="
    114     };
    115   },
    116   // 监听属性 类似于data概念
    117   computed: {},
    118   // 方法集合
    119   methods: {
    120     onLoad(event) {
    121       // 目前在某些平台参数会被主动 decode,暂时这样处理。
    122       try {
    123         this.banner = JSON.parse(decodeURIComponent(event.query));
    124       } catch (error) {
    125         this.banner = JSON.parse(event.query);
    126       }
    127       console.log(this.banner)
    128 
    129       uni.setNavigationBarTitle({
    130         title: this.banner.name
    131       });
    132       this.pageTitle = this.banner.name
    133 
    134       this.getTypelist();
    135     },
    136     loadMore() {
    137       this.loadingText = '加载中....'
    138       this.getTypelist()
    139     },
    140     onpullingdown(e) {
    141       alert(2)
    142       if (this.refreshing) {
    143         return;
    144       }
    145 
    146       this.pulling = false;
    147       if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
    148         this.refreshFlag = true;
    149         this.refreshText = "释放立即刷新";
    150       } else {
    151         this.refreshFlag = false;
    152         this.refreshText = "下拉可以刷新";
    153       }
    154     },
    155     getTypelist(refresh) {
    156       if (this.isLoading) return
    157       if (this.isFinished) return
    158       this.isLoading = true;
    159       this.requestParams.act = 'CESHI_getuserList'
    160       this.requestParams.type = this.banner.name
    161       uni.request({
    162         url: this.$Request,
    163         data: this.requestParams,
    164         method: 'GET',
    165         success: (result) => {
    166           const data = result.data.list;
    167 
    168           console.log(data)
    169           // this.isNoData = (data.length <= 0);
    170           // 查询出数据为空,显示加载完毕标识
    171           if (data.length === 0) {
    172             this.isLoading = false
    173             this.isFinished = true
    174             return
    175           }
    176           this.isLoading = false;
    177           const data_list = data.map((datalist) => {
    178             return {
    179               id: datalist.id,
    180               name: datalist.name,
    181               addrid: datalist.addrid,
    182               explicitaddress: datalist.explicitaddress,
    183               phonenumber: datalist.phonenumber,
    184               customsubtypename: datalist.customsubtypename,
    185               createDate: datalist.createDate
    186             };
    187           });
    188 
    189           if (refresh) {
    190             this.dataList = data_list;
    191             this.requestParams.page = 1;
    192           } else {
    193             this.dataList = this.dataList.concat(data_list);
    194             this.requestParams.page += 1;
    195           }
    196         },
    197         fail: (err) => {
    198           console.log(err);
    199           if (this.dataList.length == 0) {
    200             this.isNoData = true;
    201           }
    202         },
    203         complete: (e) => {
    204           this.isLoading = false;
    205           if (refresh) {
    206             this.refreshing = false;
    207             this.refreshFlag = false;
    208             this.refreshText = "已刷新";
    209             if (this.pullTimer) {
    210               clearTimeout(this.pullTimer);
    211             }
    212             this.pullTimer = setTimeout(() => {
    213               this.pulling = false;
    214             }, 1000);
    215           }
    216         }
    217       });
    218     },
    219     closeItem() {
    220 
    221     },
    222     goDetail(item) {
    223       uni.navigateTo({
    224         url: '/pages/index/detail?query=' + encodeURIComponent(JSON.stringify(item))
    225       });
    226     },
    227     onrefresh(e) {
    228       this.refreshData();
    229     },
    230     refreshData() {
    231       if (this.isLoading) {
    232         return;
    233       }
    234       this.pulling = true;
    235       this.refreshing = true;
    236       this.refreshText = "正在刷新...";
    237       this.getTypelist(true);
    238     }
    239   },
    240   // 监控data中的数据变化
    241   watch: {},
    242   // 生命周期 - 创建完成(可以访问当前this实例)
    243   created () {
    244 
    245   },
    246   // 生命周期 - 挂载完成(可以访问DOM元素)
    247   mounted () {
    248 
    249   },
    250   beforeCreate () {
    251   }, // 生命周期 - 创建之前
    252   beforeMount () {
    253   }, // 生命周期 - 挂载之前
    254   beforeUpdate () {
    255   }, // 生命周期 - 更新之前
    256   updated () {
    257   }, // 生命周期 - 更新之后
    258   beforeDestroy () {
    259   }, // 生命周期 - 销毁之前
    260   destroyed () {
    261   }, // 生命周期 - 销毁完成
    262   activated () {
    263   } // 如果页面有keep-alive缓存功能,这个函数会触发
    264 }
    265 </script>
    266 
    267 <style scoped  lang="scss">
    268   //@import url(); 引入公共css类
    269 
    270 </style>
    View Code

    5.页面css样式代码

    // 列表页样式
    .modelpage-list{
      .listview {
        position: absolute !important;
        left: 0;
        top: 50px;
        right: 0;
        bottom: 0;
        /* #ifndef APP-NVUE */
        display: flex;
        flex-direction: column;
        /* #endif */
        /* #ifndef MP-ALIPAY */
        flex-direction: column;
        /* #endif */
      }
    
      .no-data {
        flex: 1;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
      }
    
      .refresh {
        justify-content: center;
      }
    
      .refresh-view {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        width: 750 rpx;
        height: 64px;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
      }
    
      .refresh-icon {
        width: 32px;
        height: 32px;
        transition-duration: .5s;
        transition-property: transform;
        transform: rotate(0deg);
        transform-origin: 15px 15px;
      }
    
      .refresh-icon-active {
        transform: rotate(180deg);
      }
    
      .loading-icon {
        width: 28px;
        height: 28px;
        margin-right: 5px;
        color: gray;
      }
    
      .loading-text {
        margin-left: 2px;
        font-size: 16px;
        color: #999999;
      }
    
      .loading-more {
        align-items: center;
        justify-content: center;
        padding-top: 14px;
        padding-bottom: 14px;
        text-align: center;
      }
    
      .loading-more-text {
        font-size: 28upx;
        color: #999;
      }
    }
    css样式

    6.后台PHP请求数据代码

    // 获取一个用户列表
          case 'CESHI_getuserList':
                $json_string = file_get_contents('E:wwwjsonFeHelper-20200119143224.json');
                $j= json_decode($json_string);
                echo $json_string;
          break;
    PHP请求后台

    7.数据结构

    {
        "list": [
            {
                "id": "1217823977957675010",
                "name": "王XX",
                "addrid": "370304XXX0000",
                "explicitaddress": "博山石XXX",
                "phonenumber": "1396XXXX646",
                "customsubtypename": "居民普通户",
                "createDate": "2020-01-16 23:00:37",
                "deptId": "1067246875800000064"
            },
        {
                "id": "1217823977957675010",
                "name": "王XX",
                "addrid": "370304XXX0000",
                "explicitaddress": "博山石XXX",
                "phonenumber": "1396XXXX646",
                "customsubtypename": "居民普通户",
                "createDate": "2020-01-16 23:00:37",
                "deptId": "1067246875800000064"
            },
        {
                "id": "1217823977957675010",
                "name": "王XX",
                "addrid": "370304XXX0000",
                "explicitaddress": "博山石XXX",
                "phonenumber": "1396XXXX646",
                "customsubtypename": "居民普通户",
                "createDate": "2020-01-16 23:00:37",
                "deptId": "1067246875800000064"
            }]
    }
    返回数据格式

    8.页面

     

  • 相关阅读:
    [Python]执行Linux命令
    [Linux]命令返回值以及错误对照表
    [ERROR]pip insall pyodbc
    [CentOS7]安装ODBC Driver 17 for SQL Server
    [Python]获取字典所有值
    [Python]判断变量类型是否为List列表
    十分钟了解pandas
    Docker容器化技术(上)
    C语言位域
    PAT基础级-钻石段位样卷2-7-7 危险品装箱 (25 分)
  • 原文地址:https://www.cnblogs.com/pangchunlei/p/12214291.html
Copyright © 2020-2023  润新知