uni-app的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，引入的方法这里就不说了。

以下是一个简单的示例：

<template>
  <view>
    <uni-list>
      <uni-list-item v-for="(item, index) in listData" :key="index" title="{{item.title}}" note="{{item.note}}" />
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        { title: '列表项1', note: '详情描述1' },
        { title: '列表项2', note: '详情描述2' },
        // 更多数据...
      ]
    };
  }
};
</script>

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

高级配置与自定义

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

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

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

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

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

示例：

左侧显示略缩图、图标

设置 thumb 属性，可以在列表左侧显示略缩图
设置 show-extra-icon 属性，并指定 extra-icon 可以在左侧显示图标

<uni-list>
 	<uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
 	 thumb-size="lg" rightText="右侧文字"></uni-list-item>
 	<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
</uni-list>

开启点击反馈和右侧箭头

设置 clickable 为 true ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 click 事件，click 事件也在此绑定
设置 link 属性，会自动开启点击反馈，并给列表右侧添加一个箭头
设置 to 属性，可以跳转页面，link 的值表示跳转方式，如果不指定，默认为 navigateTo

<uni-list>
	<uni-list-item title="开启点击反馈" clickable  @click="onClick" ></uni-list-item>
	<uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
	<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
</uni-list>

通过插槽扩展

名称	说明
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标签，实现自己所需的效果。

示例：

<uni-list>
	<uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
		<template v-slot:header>
			<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
		</template>
	</uni-list-item>
	<uni-list-item>
		<!-- 自定义 header -->
		<template v-slot:header>
			<view class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view>
		</template>
		<!-- 自定义 body -->
		<template v-slot:body>
			<text class="slot-box slot-text">自定义插槽</text>
		</template>
		<!-- 自定义 footer-->
		<template v-slot:footer>
			<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
		</template>
	</uni-list-item>
</uni-list>

仿知乎日报实现

知乎的api接口

### 当前日报列表
get https://news-at.zhihu.com/api/4/news/latest

###历史日报
get https://news-at.zhihu.com/api/4/news/before/20240617

### 热门日报
get http://news-at.zhihu.com/api/4/news/hot

### 主题日报
get http://news-at.zhihu.com/api/4/news/theme/2024
### 2016年
get http://news-at.zhihu.com/api/4/news/before/20160101

### 日报详情
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文件定义

syntax = "v1"

info (
	title:   "doc title"
	desc:    "zhihu background service api"
	version: "1.0"
)

// 0.轮播图
type (
	SwiperData {
		id       int    `json:"id"`
		imageUrl string `json:"imageUrl"`
		title    string `json:"title"`
		desc     string `json:"description"`
	}
	SwiperResp {
		code    int          `json:"code"`
		message string       `json:"message"`
		data    []SwiperData `json:"data"`
	}
)
// ......
// 11. 知乎日报 日报列表请求
type (
	//请求
	ZhihuNewsReq {
		date string `path:"date"`
	}
	//应答
	ZhiItem {
		id    string `json:"id"`
		image string `json:"image"`
		title string `json:"title"`
		url   string `json:"url"`
		hint  string `json:"hint"`
		date  string `json:"date"`
	}
	ZhihuNewsResp {
		code    int       `json:"code"`
		message string    `json:"message"`
		stories []ZhiItem `json:"stories"`
		date    string    `json:"date"`
	}
)

// 12. 知乎日报 日报详情
type (
	//请求
	ZhiDetailReq {
		id string `path:"id"`
	}
	//应答
	CtItem {
		types string `json:"types"`
		value string `json:"value"`
	}
	ZhiDetailResp {
		code    int      `json:"code"`
		message string   `json:"message"`
		content []CtItem `json:"content"`
		title   string   `json:"title"`
		author  string   `json:"author"`
		bio     string   `json:"bio"`
		avatar  string   `json:"avatar"`
		image   string   `json:"image"`
		more    string   `json:"more"`
	}
)

service zhihu-api {
	@doc (
		summary: "zhihu api"
	)

	@handler SwiperHandler
	get /api/v1/swiperdata returns (SwiperResp)


	// 11.知乎日报 news
	@handler ZhihuNewsHandler
	get /api/v1/zhihunews/:date (ZhihuNewsReq) returns (ZhihuNewsResp)

	// 12.知乎日报 详情
	@handler ZhiDetailHandler
	get /api/v1/zhihudetail/:id (ZhiDetailReq) returns (ZhiDetailResp)
}

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

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

3.实现后台接口逻辑

func (l *ZhihuNewsLogic) ZhihuNews(req *types.ZhihuNewsReq) (resp *types.ZhihuNewsResp, err error) {

	url := "https://news-at.zhihu.com/api/4/news/latest"
	parsedDate, err := time.Parse("20060102", req.Date)
	if err != nil {
		l.Errorf("Error parsing date:", err)
	}
	url = "https://news-at.zhihu.com/api/4/news/before/" + parsedDate.AddDate(0, 0, 1).Format("20060102")
	res, err_ := httpc.Do(l.ctx, http.MethodGet, url, nil)
	if err_ != nil {
		l.Error(err_)
		return nil, err_
	}
	defer res.Body.Close()
	body, err := io.ReadAll(res.Body)
	if err != nil {
		l.Errorf("Failed to read response body:", err)
		return nil, err
	}
	var zhi types.ZhiItem
	var responseData []types.ZhiItem
	list_ := gjson.GetBytes(body, "stories").Array()
	for _, item := range list_ {
		zhi.Id = strconv.FormatInt(item.Get("id").Int(), 10)
		zhi.Title = item.Get("title").String()
		zhi.Image = item.Get("images.0").String()
		zhi.Url = item.Get("url").String()
		zhi.Hint = item.Get("hint").String()
		zhi.Date = gjson.GetBytes(body, "date").String()
		responseData = append(responseData, zhi)
	}

	if len(list_) != 0 {
		resp = &types.ZhihuNewsResp{
			Code:    0,
			Message: res.Status,
			Stories: responseData,
			Date:    gjson.GetBytes(body, "date").String(),
		}
	} else {
		resp = &types.ZhihuNewsResp{
			Code:    0,
			Message: res.Status,
			Stories: responseData,
			Date:    "",
		}
	}
	return resp, nil
}