基于ColorUi-uniapp的⼀个列表实例1.页⾯样式
2.新建⼀个uniapp项⽬，导⼊ColorUi-nuiapp模板（）
3.导⼊list组件（）
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" :
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                    ></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>{{plicitaddress}}</view>
41</view>
42<view class="margin-top-sm flex justify-between">
43<view class="cuIcon-time text-gray text-df"> {{ateDate}}</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// 这⾥存放数据
88return {
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////D 114    };
115  },
116// 监听属性类似于data概念
117  computed: {},
118// ⽅法集合
119  methods: {
120    onLoad(event) {
121// ⽬前在某些平台参数会被主动 decode，暂时这样处理。
122try {
123this.banner = JSON.parse(decodeURIComponent(event.query));
124      } catch (error) {
125this.banner = JSON.parse(event.query);
126      }
127      console.log(this.banner)
128
129      uni.setNavigationBarTitle({
130        title: this.banner.name
131      });
132this.pageTitle = this.banner.name
133
135    },
136    loadMore() {
137this.loadingText = '加载中....'
139    },
140    onpullingdown(e) {
141      alert(2)
142if (freshing) {
143return;
144      }
145
146this.pulling = false;
147if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
150      } else {
153      }
154    },
155    getTypelist(refresh) {
156if (this.isLoading) return
157if (this.isFinished) return
158this.isLoading = true;
161      quest({
162        url: this.$Request,
163        data: questParams,
164        method: 'GET',
165        success: (result) => {
166          const data = result.data.list;
167
168          console.log(data)
169// this.isNoData = (data.length <= 0);
170// 查询出数据为空，显⽰加载完毕标识
171if (data.length === 0) {
172this.isLoading = false
173this.isFinished = true
174return
175          }
176this.isLoading = false;
177          const data_list = data.map((datalist) => {
178return {
179              id: datalist.id,
180              name: datalist.name,
181              addrid: datalist.addrid,
182              explicitaddress: plicitaddress,
183              phonenumber: datalist.phonenumber,
184              customsubtypename: datalist.customsubtypename,
185              createDate: ateDate
186            };
187          });
188
189if (refresh) {
190this.dataList = data_list;
192          } else {
193this.dataList = at(data_list);
195          }
196        },
197        fail: (err) => {
198          console.log(err);
199if (this.dataList.length == 0) {
200this.isNoData = true;
201          }
202        },
203        complete: (e) => {
204this.isLoading = false;
205if (refresh) {
209if (this.pullTimer) {
210              clearTimeout(this.pullTimer);
211            }
212this.pullTimer = setTimeout(() => {
213this.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) {flutter uniapp 哪个好
229    },
230    refreshData() {
231if (this.isLoading) {
232return;
233      }
234this.pulling = 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:\www\json\FeHelper-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"
}]
}
返回数据格式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。