devbox
煮酒与君饮
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uni-app的uni-list列表组件高效使用举例 (仿知乎日报实现)

作者：煮酒与君饮 | 2024-07-24 07:18:46

赞

踩

uni-list

目录

前言

uni-list组件介绍

基本使用

高级配置与自定义

仿知乎日报实现

知乎的api接口

后台服务实现

知乎日报首页

轮播图界面实现

客户端接口实现

uni-list列表使用

插入日期分割线

下滑分页的实现

完整页面代码

其他资源

前言

在移动应用开发领域，列表展示是最常见的需求之一，无论是新闻列表、商品目录还是社交动态，一个清晰、响应迅速的列表组件是提升用户体验的关键。

Uni-App作为一款优秀的跨平台开发框架，提供了丰富的组件库，其中uni-list组件就是专为列表展示而设计的高效解决方案。本文将深入介绍uni-list组件的使用方法、特点及应用场景，帮助开发者快速掌握这一利器。 

uni-list组件广泛应用于各种场景，如：新闻资讯列表，展示新闻标题、摘要和配图。商品列表，展示商品图片、名称、价格和评价。社交动态，展示用户头像、用户名、动态内容和互动按钮。设置页面，展示各类开关、选项等。

uni-list组件介绍

uni-list是Uni-App框架内置的一个列表组件，它以简洁、灵活的方式封装了列表展示逻辑，支持多种列表项布局，如文本、图标、图片等组合展示。通过uni-list，开发者可以轻松创建美观、响应式的列表界面，无需从零开始编写复杂的布局代码，大大提升了开发效率。

uni-list官方文档地址：uni-app官网

uni-list 列表 - DCloud 插件市场

基本使用

在Uni-App项目中使用uni-list，首先确保在页面模板中引入uni-list组件。uni-list组件属于uni-app扩展组件uni-ui中的一个组件。要想使用它需要先引入uni-ui，引入的方法这里就不说了。

以下是一个简单的示例：

  1. <template>
  2.   <view>
  3.     <uni-list>
  4.       <uni-list-item v-for="(item, index) in listData" :key="index" title="{{item.title}}" note="{{item.note}}" />
  5.     </uni-list>
  6.   </view>
  7. </template>
  8.  
  9. <script>
  10. export default {
  11.   data() {
  12.     return {
  13.       listData: [
  14.         { title: '列表项1', note: '详情描述1' },
  15.         { title: '列表项2', note: '详情描述2' },
  16.         // 更多数据...
  17.       ]
  18.     };
  19.   }
  20. };
  21. </script>

在上述例子中，通过v-for指令遍历listData数组，为每个数组元素创建一个uni-list-item，展示标题(title)和备注(note)信息。

高级配置与自定义

uni-list组件的强大之处在于其高度的可定制性。

除了基本的文本展示，它还支持图片、图标、开关、滑动操作等多种元素的嵌入，以及不同的布局模式（如左图右文、上下结构等）。

图片展示：通过<uni-list-item>的thumb属性，可以为列表项添加左侧或顶部的缩略图。

图标与按钮：利用extra插槽，可以在列表项末尾添加图标或操作按钮，如删除、编辑等。

滑动操作：结合swipe-action组件，可以为列表项添加滑动时触发的操作菜单，提升交互体验。

示例：

左侧显示略缩图、图标

  • 设置 thumb 属性 ，可以在列表左侧显示略缩图
  • 设置 show-extra-icon 属性，并指定 extra-icon 可以在左侧显示图标
  1. <uni-list>
  2.  	<uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
  3.  	 thumb-size="lg" rightText="右侧文字"></uni-list-item>
  4.  	<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
  5. </uni-list>

 开启点击反馈和右侧箭头

  • 设置 clickable 为 true ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 click 事件，click 事件也在此绑定
  • 设置 link 属性，会自动开启点击反馈，并给列表右侧添加一个箭头
  • 设置 to 属性，可以跳转页面，link 的值表示跳转方式，如果不指定，默认为 navigateTo
  1. <uni-list>
  2. 	<uni-list-item title="开启点击反馈" clickable  @click="onClick" ></uni-list-item>
  3. 	<uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
  4. 	<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
  5. </uni-list>
  6.

通过插槽扩展

名称说明
header左/上内容插槽，可完全自定义默认显示
body中间内容插槽，可完全自定义中间内容
footer右/下内容插槽，可完全自定义右侧内容

通过插槽扩展 需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现 如果 uni-list-item 组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。 uni-list-item提供了3个可扩展的插槽：header、body、footer

  • 当 direction 属性为 row 时表示水平排列，此时 header 表示列表的左边部分，body 表示列表的中间部分，footer 表示列表的右边部分
  • 当 direction 属性为 column 时表示垂直排列，此时 header 表示列表的上边部分，body 表示列表的中间部分，footer 表示列表的下边部分 开发者可以只用1个插槽，也可以3个一起使用。在插槽中可自主编写view标签，实现自己所需的效果。

 示例：

  1. <uni-list>
  2. 	<uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
  3. 		<template v-slot:header>
  4. 			<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
  5. 		</template>
  6. 	</uni-list-item>
  7. 	<uni-list-item>
  8. 		<!-- 自定义 header -->
  9. 		<template v-slot:header>
  10. 			<view class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view>
  11. 		</template>
  12. 		<!-- 自定义 body -->
  13. 		<template v-slot:body>
  14. 			<text class="slot-box slot-text">自定义插槽</text>
  15. 		</template>
  16. 		<!-- 自定义 footer-->
  17. 		<template v-slot:footer>
  18. 			<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
  19. 		</template>
  20. 	</uni-list-item>
  21. </uni-list>

仿知乎日报实现

知乎的api接口

  1. ### 当前日报列表
  2. get https://news-at.zhihu.com/api/4/news/latest
  3.  
  4. ###历史日报
  5. get https://news-at.zhihu.com/api/4/news/before/20240617
  6.  
  7. ### 热门日报
  8. get http://news-at.zhihu.com/api/4/news/hot
  9.  
  10. ### 主题日报
  11. get http://news-at.zhihu.com/api/4/news/theme/2024
  12. ### 2016年
  13. get http://news-at.zhihu.com/api/4/news/before/20160101
  14.  
  15. ### 日报详情
  16. get http://news-at.zhihu.com/api/4/news/9773253
curl https://news-at.zhihu.com/api/4/news/latest |python3 -m json.tool

 

后台服务实现

博主没有直接调用知乎的后台api接口，而是自己使用golang的go-zero框架，从新包装实现了一下。 如果不用golang实现后台接口，以下内容可忽略。可以直接调用知乎的接口来测试。

1.go-api文件定义

  1. syntax = "v1"
  2.  
  3. info (
  4. 	title:   "doc title"
  5. 	desc:    "zhihu background service api"
  6. 	version: "1.0"
  7. )
  8.  
  9. // 0.轮播图
  10. type (
  11. 	SwiperData {
  12. 		id       int    `json:"id"`
  13. 		imageUrl string `json:"imageUrl"`
  14. 		title    string `json:"title"`
  15. 		desc     string `json:"description"`
  16. 	}
  17. 	SwiperResp {
  18. 		code    int          `json:"code"`
  19. 		message string       `json:"message"`
  20. 		data    []SwiperData `json:"data"`
  21. 	}
  22. )
  23. // ......
  24. // 11. 知乎日报 日报列表请求
  25. type (
  26. 	//请求
  27. 	ZhihuNewsReq {
  28. 		date string `path:"date"`
  29. 	}
  30. 	//应答
  31. 	ZhiItem {
  32. 		id    string `json:"id"`
  33. 		image string `json:"image"`
  34. 		title string `json:"title"`
  35. 		url   string `json:"url"`
  36. 		hint  string `json:"hint"`
  37. 		date  string `json:"date"`
  38. 	}
  39. 	ZhihuNewsResp {
  40. 		code    int       `json:"code"`
  41. 		message string    `json:"message"`
  42. 		stories []ZhiItem `json:"stories"`
  43. 		date    string    `json:"date"`
  44. 	}
  45. )
  46.  
  47. // 12. 知乎日报 日报详情
  48. type (
  49. 	//请求
  50. 	ZhiDetailReq {
  51. 		id string `path:"id"`
  52. 	}
  53. 	//应答
  54. 	CtItem {
  55. 		types string `json:"types"`
  56. 		value string `json:"value"`
  57. 	}
  58. 	ZhiDetailResp {
  59. 		code    int      `json:"code"`
  60. 		message string   `json:"message"`
  61. 		content []CtItem `json:"content"`
  62. 		title   string   `json:"title"`
  63. 		author  string   `json:"author"`
  64. 		bio     string   `json:"bio"`
  65. 		avatar  string   `json:"avatar"`
  66. 		image   string   `json:"image"`
  67. 		more    string   `json:"more"`
  68. 	}
  69. )
  70.  
  71. service zhihu-api {
  72. 	@doc (
  73. 		summary: "zhihu api"
  74. 	)
  75.  
  76. 	@handler SwiperHandler
  77. 	get /api/v1/swiperdata returns (SwiperResp)
  78.  
  79.  
  80. 	// 11.知乎日报 news
  81. 	@handler ZhihuNewsHandler
  82. 	get /api/v1/zhihunews/:date (ZhihuNewsReq) returns (ZhihuNewsResp)
  83.  
  84. 	// 12.知乎日报 详情
  85. 	@handler ZhiDetailHandler
  86. 	get /api/v1/zhihudetail/:id (ZhiDetailReq) returns (ZhiDetailResp)
  87. }

2.使用goctl工具自动生成后台项目代码

goctl api go -api go-zhihu/zhihu.api -dir go-zhihu/

3.实现后台接口逻辑

  1. func (l *ZhihuNewsLogic) ZhihuNews(req *types.ZhihuNewsReq) (resp *types.ZhihuNewsResp, err error) {
  2.  
  3. 	url := "https://news-at.zhihu.com/api/4/news/latest"
  4. 	parsedDate, err := time.Parse("20060102", req.Date)
  5. 	if err != nil {
  6. 		l.Errorf("Error parsing date:", err)
  7. 	}
  8. 	url = "https://news-at.zhihu.com/api/4/news/before/" + parsedDate.AddDate(0, 0, 1).Format("20060102")
  9. 	res, err_ := httpc.Do(l.ctx, http.MethodGet, url, nil)
  10. 	if err_ != nil {
  11. 		l.Error(err_)
  12. 		return nil, err_
  13. 	}
  14. 	defer res.Body.Close()
  15. 	body, err := io.ReadAll(res.Body)
  16. 	if err != nil {
  17. 		l.Errorf("Failed to read response body:", err)
  18. 		return nil, err
  19. 	}
  20. 	var zhi types.ZhiItem
  21. 	var responseData []types.ZhiItem
  22. 	list_ := gjson.GetBytes(body, "stories").Array()
  23. 	for _, item := range list_ {
  24. 		zhi.Id = strconv.FormatInt(item.Get("id").Int(), 10)
  25. 		zhi.Title = item.Get("title").String()
  26. 		zhi.Image = item.Get("images.0").String()
  27. 		zhi.Url = item.Get("url").String()
  28. 		zhi.Hint = item.Get("hint").String()
  29. 		zhi.Date = gjson.GetBytes(body, "date").String()
  30. 		responseData = append(responseData, zhi)
  31. 	}
  32.  
  33. 	if len(list_) != 0 {
  34. 		resp = &types.ZhihuNewsResp{
  35. 			Code:    0,
  36. 			Message: res.Status,
  37. 			Stories: responseData,
  38. 			Date:    gjson.GetBytes(body, "date").String(),
  39. 		}
  40. 	} else {
  41. 		resp = &types.ZhihuNewsResp{
  42. 			Code:    0,
  43. 			Message: res.Status,
  44. 			Stories: responseData,
  45. 			Date:    "",
  46. 		}
  47. 	}
  48. 	return resp, nil
  49. }

知乎日报首页

轮播图界面实现

  1. <template>
  2. <view class="content">
  3. 		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
  4. 			:duration="duration" lazy-render>
  5. 			
  6. 			<swiper-item v-for="item in swiperList" :key="item.id">
  7. 				<image :src="item.image" :alt="item.title" mode="widthFix" class="swiper-image"></image>
  8. 				 <view class="swiper-desc" v-if="item.title">{{ item.title }}</view>
  9. 			</swiper-item>
  10. 		</swiper>
  11. </view>
  12. </template>
  13.  
  14. <script>
  15. 	import { getZhihuNewsList } from '@/api/zhihu.js';
  16. 	export default {
  17. 		data() {
  18. 			return {
  19. 				indicatorDots: true,
  20. 				autoplay: true,
  21. 				interval: 2000,
  22. 				duration: 500,
  23. 				// 轮播图的数据列表，默认为空数组
  24. 				swiperList:[],
  25. 				// 日报数据列表，默认为空数组
  26. 				stories:[],
  27. 				currentDate: '', // 初始化为今天的日期
  28. 				previousDate: '', // 上一个的日期
  29. 			}
  30. 		}
  31. }
  32. </script>

客户端接口实现

  1. // 知乎日报 列表页
  2. /**
  3.  * date 日期 格式:yyyymmdd
  4.  */
  5. export const getZhihuNewsList = async (date) => {
  6.   try {
  7. 	console.log('getZhihuNewsList request');
  8. 	let date_ = date.replace(/-/g, '')
  9.     const response = await uni.$http.get('/zhihunews/'+date_);
  10. 	console.log(response);
  11.     if (response.statusCode !== 200) {
  12.       uni.showToast({
  13.         title: '数据请求失败! ',
  14.         duration: 1500,
  15.         icon: 'none',
  16.       });
  17.       return [];
  18.     }
  19.     return response.data;
  20.   } catch (error) {
  21.     console.error('Network request failed:', error);
  22.     uni.showToast({
  23.       title: '网络请求失败! ',
  24.       duration: 1500,
  25.       icon: 'none',
  26.     });
  27.     return [];
  28.   }
  29. };

uni-list列表使用

  1. <uni-list>
  2. 	 <uni-list-item direction="row" v-for="item in stories" :key="item.id" :title="item.title" >
  3. 				<template v-slot:body>
  4. 					<view class="uni-list-box uni-content">
  5. 						<view class="uni-title uni-ellipsis-2">{{item.title}}</view>
  6. 						<view class="uni-note">
  7. 							<text>{{item.hint}}</text>
  8. 						</view>
  9. 					</view>
  10. 				</template>
  11. 			
  12. 				<template v-slot:footer>
  13. 					<view class="uni-thumb" style="margin: 0;">
  14. 						<image :src="item.image" mode="aspectFill"></image>
  15. 					</view>
  16. 				</template>
  17. 			</uni-list-item>
  18. </uni-list>

插入日期分割线

如何插入日期分割线？类似于知乎日报上，当往下滑动时会展示历史日期的日报，需要展示下日期和下滑线。如何在uni-list列表中实现这一效果呢？以下是代码：

  1. <uni-list>
  2. 		  <template v-for="(item, index) in stories" :key="item.id">
  3. 		    <!-- 如果是第一条或者日期有变化，则插入日期分割线 -->
  4. 		    <uni-list-item direction="row" v-if="isShowDivider(index)" >
  5. 		    <template v-slot:header>
  6. 				<view class="uni-divider__content">
  7. 				  <text>{{item.date.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3')}}</text>
  8. 				</view>
  9. 				<view class="uni-divider__line"></view>
  10. 			</template>
  11. 			</uni-list-item>
  12. 		
  13. 		    <!-- 正常的列表项 -->
  14. 		    <uni-list-item direction="row" :title="item.title">
  15. 		      <template v-slot:body>
  16. 		        <view class="uni-list-box uni-content">
  17. 		          <view class="l-title uni-ellipsis-2">{{item.title}}</view>
  18. 		          <view class="uni-note">
  19. 		            <text>{{item.hint}}</text>
  20. 		          </view>
  21. 		        </view>
  22. 		      </template>
  23. 		      <template v-slot:footer>
  24. 		        <view class="uni-thumb" style="margin: 0;">
  25. 		          <image :src="item.image" mode="aspectFill"></image>
  26. 		        </view>
  27. 		      </template>
  28. 		    </uni-list-item>
  29. 		  </template>
  30. </uni-list>

下滑分页的实现

当向页面下滑动时，需要展示历史日期的日报，通过onReachBottom()这一回调可以实现效果。

  1.         /**
  2. 		 * 上拉加载回调函数
  3. 		 */
  4. 		  onReachBottom() {
  5. 			console.log('onReachBottom')
  6. 			this.getmorenews()
  7. 		 }
  8.  
  9.          methods: {
  10. 			 formatDate(date) {
  11. 			  const year = date.getFullYear();
  12. 			  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1
  13. 			  const day = String(date.getDate()).padStart(2, '0');
  14. 			  return `${year}-${month}-${day}`;
  15. 			},
  16. 			
  17. 			isShowDivider(index) {
  18. 				if (this.stories[index].date !== this.previousDate) {
  19. 				    this.previousDate = this.stories[index].date;
  20. 					console.log(this.previousDate)
  21. 					if(index!==0){
  22. 						 return true;
  23. 					}
  24. 				}
  25. 				return false;
  26. 			},
  27. 			
  28. 			// 触底之后触发函数，
  29. 			getmorenews() {
  30. 				//this.loadStatu = true
  31. 				//this.listStatus = 'loading'
  32. 				//每次滑动都递减一天
  33. 				const date_ = new Date(this.currentDate);
  34. 				console.log(date_);
  35. 				date_.setDate(date_.getDate() - 1); // 日期减一
  36. 				//console.log(date_);
  37. 				let currentDate_ = this.formatDate(date_);
  38. 				console.log('currentDate_:'+currentDate_);
  39. 				getZhihuNewsList(currentDate_).then(result => {
  40. 					console.log("getZhihuNewsList,result:");
  41. 					console.log(result);
  42. 					this.currentDate = this.formatDate(date_);
  43. 					this.stories = this.stories.concat(result.stories);
  44. 				});
  45. 			}
  46. 		},

完整页面代码

  1. <template>
  2. 	<view class="content">
  3. 		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
  4. 			:duration="duration" lazy-render>
  5. 			
  6. 			<swiper-item v-for="item in swiperList" :key="item.id">
  7. 				<image :src="item.image" :alt="item.title" mode="widthFix" class="swiper-image"></image>
  8. 				 <view class="swiper-desc" v-if="item.title">{{ item.title }}</view>
  9. 			</swiper-item>
  10. 		</swiper>
  11. 		 
  12. 		 <!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
  13. 		<uni-list>
  14. 		  <template v-for="(item, index) in stories" :key="item.id">
  15. 		    <!-- 如果是第一条或者日期有变化，则插入日期分割线 -->
  16. 		    <uni-list-item direction="row" v-if="isShowDivider(index)" >
  17. 		    <template v-slot:header>
  18. 				<view class="uni-divider__content">
  19. 				  <text>{{item.date.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3')}}</text>
  20. 				</view>
  21. 				<view class="uni-divider__line"></view>
  22. 			</template>
  23. 			</uni-list-item>
  24. 		
  25. 		    <!-- 正常的列表项 -->
  26. 		    <uni-list-item direction="row" :title="item.title">
  27. 		      <template v-slot:body>
  28. 		        <view class="uni-list-box uni-content">
  29. 		          <view class="l-title uni-ellipsis-2">{{item.title}}</view>
  30. 		          <view class="uni-note">
  31. 		            <text>{{item.hint}}</text>
  32. 		          </view>
  33. 		        </view>
  34. 		      </template>
  35. 		      <template v-slot:footer>
  36. 		        <view class="uni-thumb" style="margin: 0;">
  37. 		          <image :src="item.image" mode="aspectFill"></image>
  38. 		        </view>
  39. 		      </template>
  40. 		    </uni-list-item>
  41. 		  </template>
  42. 		</uni-list>
  43. 	</view>
  44. </template>
  45.  
  46. <script>
  47. 	import { getZhihuNewsList } from '@/api/zhihu.js';
  48. 	export default {
  49. 		data() {
  50. 			return {
  51. 				indicatorDots: true,
  52. 				autoplay: true,
  53. 				interval: 2000,
  54. 				duration: 500,
  55. 				// 轮播图的数据列表，默认为空数组
  56. 				swiperList:[],
  57. 				// 日报数据列表，默认为空数组
  58. 				stories:[],
  59. 				currentDate: '', // 初始化为今天的日期
  60. 				previousDate: '', // 上一个的日期
  61. 			}
  62. 		},
  63. 		onLoad() {
  64. 			this.currentDate = this.formatDate(new Date())
  65. 			this.previousDate = this.currentDate
  66. 		},
  67. 		methods: {
  68. 			 formatDate(date) {
  69. 			  const year = date.getFullYear();
  70. 			  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1
  71. 			  const day = String(date.getDate()).padStart(2, '0');
  72. 			  return `${year}-${month}-${day}`;
  73. 			},
  74. 			
  75. 			isShowDivider(index) {
  76. 				if (this.stories[index].date !== this.previousDate) {
  77. 				    this.previousDate = this.stories[index].date;
  78. 					console.log(this.previousDate)
  79. 					if(index!==0){
  80. 						 return true;
  81. 					}
  82. 				}
  83. 				return false;
  84. 			},
  85. 			
  86. 			// 触底之后触发函数，
  87. 			getmorenews() {
  88. 				//this.loadStatu = true
  89. 				//this.listStatus = 'loading'
  90. 				//每次滑动都递减一天
  91. 				const date_ = new Date(this.currentDate);
  92. 				console.log(date_);
  93. 				date_.setDate(date_.getDate() - 1); // 日期减一
  94. 				//console.log(date_);
  95. 				let currentDate_ = this.formatDate(date_);
  96. 				console.log('currentDate_:'+currentDate_);
  97. 				getZhihuNewsList(currentDate_).then(result => {
  98. 					console.log("getZhihuNewsList,result:");
  99. 					console.log(result);
  100. 					this.currentDate = this.formatDate(date_);
  101. 					this.stories = this.stories.concat(result.stories);
  102. 				});
  103. 			}
  104. 		},
  105. 		mounted() {
  106. 			console.log("mounted")
  107. 			console.log('currentDate:'+this.currentDate);
  108. 			getZhihuNewsList(this.currentDate).then(result => {
  109. 				console.log("getZhihuNewsList,result:");
  110. 				console.log(result);
  111. 				this.stories = result.stories;
  112. 				this.swiperList = result.stories;
  113. 			});
  114. 		},/**
  115. 		 * 下拉刷新回调函数
  116. 		 */
  117. 		onPullDownRefresh() {
  118. 			console.log('onPullDownRefresh')
  119. 		},
  120. 		/**
  121. 		 * 上拉加载回调函数
  122. 		 */
  123. 		onReachBottom() {
  124. 			console.log('onReachBottom')
  125. 			this.getmorenews()
  126. 		}
  127. 	}
  128. </script>
  129.  
  130. <style lang="scss" scoped>
  131. 	@import '@/common/uni-ui.scss';
  132.  
  133. 	page {
  134. 		display: flex;
  135. 		flex-direction: column;
  136. 		box-sizing: border-box;
  137. 		background-color: #efeff4;
  138. 		min-height: 100%;
  139. 		height: auto;
  140. 	}
  141. 	
  142. 	.content {
  143. 		width: 100%;
  144. 		display: flex;
  145. 		flex-direction: column;
  146. 		align-items: center;
  147. 		justify-content: center;
  148. 	}
  149.  
  150. 	.uni-list-box {
  151. 		margin-top: 0;
  152. 	}
  153.  
  154. 	.l-title {
  155. 		font-weight: bold;
  156. 		font-size: 30rpx;
  157. 		color: #3b4144;
  158. 	}
  159. 	
  160. 	.uni-content {
  161. 		padding-right: 10rpx;
  162. 	}
  163.  
  164. 	.uni-note {
  165. 		display: flex;
  166. 		margin: 0;
  167. 		justify-content: space-between;
  168. 	}
  169.  
  170. 	.thumb-image {
  171. 		width: 100%;
  172. 		height: 100%;
  173. 	}
  174.  
  175. 	/*布局和溢出隐藏规则*/
  176. 	.ellipsis {
  177. 		display: flex;
  178. 		overflow: hidden;
  179. 	}
  180.  
  181. 	.uni-ellipsis-1 {
  182. 		overflow: hidden;
  183. 		white-space: nowrap;  /*nowrap;：强制文本在一行内显示，不允许换行*/
  184. 		text-overflow: ellipsis;
  185. 	}
  186.  
  187. 	/*多行文本的省略效果*/
  188. 	.uni-ellipsis-2 {
  189. 		overflow: hidden;
  190. 		/*表示当文本内容超出所在容器的宽度时，用省略号来代替超出的部分*/
  191. 		text-overflow: ellipsis;
  192. 		display: -webkit-box;
  193. 		-webkit-line-clamp: 2;
  194. 		-webkit-box-orient: vertical;
  195. 	}
  196. 	
  197. 	.swiper {
  198. 		width: 100%;
  199. 		height: 300rpx;
  200. 	}
  201. 	.swiper-image{
  202. 		width: 100%; 
  203. 		height: auto;
  204. 	}
  205. 	
  206. 	.swiper-desc {
  207. 	  position: absolute;
  208. 	  bottom: 20px;
  209. 	  left: 0;
  210. 	  right: 0;
  211. 	  color: #fff;
  212. 	  background-color: rgba(0, 0, 0, 0.5);
  213. 	  padding: 10px;
  214. 	  text-align: center;
  215. 	}
  216. 	
  217. 	.swiper-item {
  218. 		display: block;
  219. 		height: 300rpx;
  220. 		line-height: 300rpx;
  221. 		text-align: center;
  222. 	}
  223. 	
  224. 	.date-divider {
  225. 	  color: #8f8f94;
  226. 	  font-size: 12rpx;
  227. 	  font-weight: bold;
  228. 	}
  229. 	.line-divider {
  230. 	  height: 1px;
  231. 	  width: 75%;
  232. 	  margin-left: 10rpx;
  233. 	  margin-top: 15rpx;
  234. 	  background-color: #D8D8D8; /* 分割线颜色 */
  235. 	}
  236. </style>

完整工程源码

最后，附上测试的工程完整源码。

资源下载地址：https://download.csdn.net/download/qq8864/89377440

人到了一定年纪，你再去回首过往，曾经那些重大的时刻，我们也一步步咬紧牙关挺过去，一步步熬过许多最黑暗的日子，走到如今。关关难过，关关通过，一路上，我们也练就了一身的本领，也拥有一些处事不惊的能力和适应生活的心态。

杨绛先生说:“生活并非都是繁花锦簇，所有的好，不过是来自内心的知足，眼里的热爱，以及对万千世界删繁就简的态度。与独处相安，与万事言和。这烟火人间，事事值得，事事也遗憾。”

生活不可能都是鲜花和阳光，也充满无数的荆棘和坎坷，走过的每一段岁月，曾经都有美好照亮前行，也有一些遗憾留在心中。

生活总是喜忧参半，没有十全十美，万事只求半称心，所有的美好不过都是来自于懂得知足常乐。

生活都是在于选择之中，选择了一条路，注定也会失去另一条路的风景，遗憾是人生常态而已。不如充实自己，什么让你快乐，你就去做什么，不要非要去求什么意义。对我来说，虽然天色以晚，别人喜欢刷抖音，而我喜欢敲代码和写文字，简称码字。这使我快乐，我走在充实自己的路上，足以。

如果钓鱼的意义是为了吃鱼肉，那生活将是多么无趣。

其他资源

 uni-list 列表 - DCloud 插件市场

https://news-at.zhihu.com/api/4/news/latest

-Api/豆瓣电影.md at master · shichunlei/-Api · GitHub

https://www.cnblogs.com/oopsguy/p/5968447.html

uni-app官网

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号