后浪云百度小程序教程：feed-item 信息流子项

2021-11-14

feed-item 信息流子项
- 属性说明
- 示例
  - 代码示例
- Bug & Tip

feed-item 信息流子项

解释：信息流子项，包括左文右图、纯文本、上文下图、多图及视频模式。

属性说明

属性名	类型	必填	默认值	说明
theme	String	否	default	信息流子项的主题。default：左文右图模式，如不配置 content 中的 images 则是纯文本子项；large-image：大图模式；multiple-images：多图模式
content	Object	否	{title: ‘这个是子项的标题’,infoSource: ‘百度新闻’,commentsNum: 2,images: []}	信息流子项目的内容，包含标题（title），消息来源（infoSource），评论数（commentsNum），图片路径（images）
video	Object	否	{isVideo: true, time: ‘05:00’}	是否为视频和视频信息，配置 isVideo 为 true，则显示视频形式（注：在多图模式不生效）
status	String	否	0	阅读状态。0：未读，1：已读

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN
JS
CSS
JSON

 
 
 
  
  
  <view class="smt-feed-item-container">
  
  
   <view class="smt-feed-item" s-for="item in cardsList">
  
  
   <view s-if="{{loaded}}" class="mode-title">
  
  
   <view class="mode-title-line-left"></view>
  
  
   <view class="mode-title-text">{{item.name}}</view>
  
  
   <view class="mode-title-line-right"></view>
  
  
   </view>
  
  
   <view class="smt-card-area" >
  
  
   <smt-feed-item 
  
  
   theme="{{item.config.theme}}"
  
  
   content="{{item.config.content}}"
  
  
   video="{{item.config.video}}">
  
  
   </smt-feed-item>
  
  
   </view> 
  
  
   </view>
  
  
   <view class="smt-card-config" s-if="{{loaded}}">
  
  
   <view class="item-scroll" bindtap="navigateTo" hover-class="page-status-hover" hover-stay-time="240">
  
  
   <text class="switch-text switch-text-before">查看页面模板</text>
  
  
   <image class="item-logo" src="https://b.bdstatic.com/miniapp/images/extensions/right_arrow.png"></image>
  
  
   </view>
  
  
   </view>
  
  
  </view>

Bug & Tip

Tip：信息流子项多种模式可以任意组合，模块间需要使用分割线区隔。配图不可清晰度过低，建议标题文字不超过 34 个中文字符。

作者：后浪云

链接：https://www.idc.net/help/186029/

文章版权归作者所有，未经允许请勿转载。

THE END