基于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="urlist-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="">dcm是什么意思
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 '《组件路径》';pigi
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: 'urlist',
78// import引⼊的组件需要注⼊到对象中才能使⽤
79 components: {
80 uniList,
81 uniCell,
82 uniRefresh,
83 uniLoadMore,
84 noData
85 },
86 data () {
87// 这⾥存放数据
88return {
89 requestParams: {cotton是什么意思
90 page: 1,
91 limit: 10
92 },
93 banner: {},
94 pageTitle: '绑定⽤户列表',
95 page: 1,
96
97 dataList: [],
98 navigateFlag: fal,
99 pulling: fal,
100 refreshing: fal,
101 refreshFlag: fal,
102 refreshText: "",
103 isLoading: fal,
104 loadingText: '加载中...',
105 isFinished: fal,
106 isNoData: fal,
107 angle: 0,
108 loadingMoreText: {
109 contentdown: '',
110 contentrefresh: '',
111 contentnomore: ''
112 },
113 refreshIcon: "data:image/png;ba64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5QTFRFcHBw3Nzct7e39vb2ycnJioqK7e3tpqam29vb////D 114 };
115 },
116// 监听属性类似于data概念
117 computed: {},
118// ⽅法集合
119 methods: {
120 onLoad(event) {
121// ⽬前在某些平台参数会被主动 decode，暂时这样处理。
122try {
123this.banner = JSON.par(decodeURIComponent(event.query));
124 } catch (error) {
125this.banner = JSON.par(event.query);
126 }
127 console.log(this.banner)
128
129 uni.tNavigationBarTitle({
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 = fal;
147if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
150 } el {
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 = fal
173this.isFinished = true
174return
175 }
176this.isLoading = fal;
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 } el {
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 = fal;
205if (refresh) {
209if (this.pullTimer) {
210 clearTimeout(this.pullTimer);
211 }
212this.pullTimer = tTimeout(() => {
213this.pulling = fal;
214 }, 1000);
215 }
216 }
217 });
218 },
219 cloItem() {
220
221 },
222 goDetail(item) {
223 uni.navigateTo({
224 url: '/pages/index/detail?query=' + encodeURIComponent(JSON.stringify(item)) 225 });
226 },
227 onrefresh(e) {
229 },
230 refreshData() {
231if (this.isLoading) {
232return;
233 }
234this.pulling = true;
238 }
239 },
syh240// 监控data中的数据变化
241 watch: {},
242// ⽣命周期 - 创建完成（可以访问当前this实例）
243 created () {
244
245 },
246// ⽣命周期 - 挂载完成（可以访问DOM元素）
247 mounted () {
248
is
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;
larger than life
/* #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;casual是什么意思
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请求数据代码
// 获取⼀个⽤户列表
ca 'CESHI_geturList':
$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"
besure},
{
"id": "1217823977957675010",
"name": "王XX",
"addrid": "370304XXX0000",
"explicitaddress": "博⼭⽯XXX",
"phonenumber": "1396XXXX646",
"customsubtypename": "居民普通户",
"createDate": "2020-01-16 23:00:37",
"deptId": "1067246875800000064"
}]
}
返回数据格式
