百度智能小程序 信息流子项
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 已读 |
示例
代码示例
<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>{
"navigationBarTitleText": "feedItem",
"navigationStyle": "default",
"usingComponents": {
"smt-feed-item": "@smt-ui/component/src/feed-item"
}
}Page({
data: {
cardsList: [{
name: '单图文字模板',
config: {
theme: 'default',
content: {
title: '宠物自己在家时, 如何帮助它度过孤独时光',
infoSource: '萌宠在家',
commentsNum: 183,
images: ['https://spcbj.cdn.bcebos.com/webpkgdev/20200320/KGw3zCAvCXDtSsbcFZsMWlbon2fuPRUZ/v171/extensions/component/resources/smt-feed-item/demo1.jpg']
}
}
}, {
name: '视频小图模板',
config: {
theme: 'default',
content: {
title: '海洋的最深处到底有什么神奇的生物？',
infoSource: '智慧百科',
commentsNum: 183,
images: ['https://spcbj.cdn.bcebos.com/webpkgdev/20200320/KGw3zCAvCXDtSsbcFZsMWlbon2fuPRUZ/v171/extensions/component/resources/smt-feed-item/demo2.jpg']
},
video: {
isVideo: true,
time: '05:20'
}
}
}, {
name: '三图文字模板 ',
config: {
theme: 'multiple-images',
content: {
title: '欧洲各地被遗忘的地方，似乎时间被施了魔法一样，一切都已经停止了',
infoSource: '旅行游记',
commentsNum: '18.3万',
images: [
'https://spcbj.cdn.bcebos.com/webpkgdev/20200320/KGw3zCAvCXDtSsbcFZsMWlbon2fuPRUZ/v171/extensions/component/resources/smt-feed-item/demo3.jpg',
'https://spcbj.cdn.bcebos.com/webpkgdev/20200320/KGw3zCAvCXDtSsbcFZsMWlbon2fuPRUZ/v171/extensions/component/resources/smt-feed-item/demo4.jpg',
'https://spcbj.cdn.bcebos.com/webpkgdev/20200320/KGw3zCAvCXDtSsbcFZsMWlbon2fuPRUZ/v171/extensions/component/resources/smt-feed-item/demo2.jpg']
}
}
}, {
name: '大图文字模板 ',
config: {
theme: 'large-image',
content: {
title: '跟猫主子过圣诞节要什么男朋友，单身朋友的福音',
infoSource: '萌宠在家',
commentsNum: '18.3万',
images: ['https://spcbj.cdn.bcebos.com/webpkgdev/20200320/KGw3zCAvCXDtSsbcFZsMWlbon2fuPRUZ/v171/extensions/component/resources/smt-feed-item/demo6.jpg']
}
}
}, {
name: '视频大图模板 ',
config: {
theme: 'large-image',
content: {
title: '跟猫主子过圣诞节要什么男朋友，单身朋友的福音',
infoSource: '萌宠在家',
commentsNum: '18.3万',
images: ['https://spcbj.cdn.bcebos.com/webpkgdev/20200320/KGw3zCAvCXDtSsbcFZsMWlbon2fuPRUZ/v171/extensions/component/resources/smt-feed-item/demo7.jpg']
},
video: {
isVideo: true,
time: '05:20'
}
}
}, {
name: '纯文字模板 ',
config: {
theme: 'default',
content: {
title: '2020装修流行趋势指南，小户型也有大空间，简单实用',
infoSource: '实用家装',
commentsNum: '18.3万'
}
}
}]
},
onShow() {
this.setData('loaded', true);
},
navigateTo() {
swan.navigateTo({url: '/extensions/component/smt-feed-page/smt-feed-page'});
}
});.smt-feed-item-container {
margin-top: .2rem;
padding-bottom: .4rem;
}
.smt-feed-item {
margin-bottom: .4rem;
}
.smt-card-area {
margin-top: .14rem;
}
.switch-text-before {
display: flex;
align-items: center;
font-size: 28.986rpx;
color: #333;
}
.smt-card-config {
background: #fff;
overflow: hidden;
}
.item-logo {
display: inline-block;
width: 32.609rpx;
height: 32.609rpx;
margin: 34.005rpx 0;
}Bug & Tip
- Tip： 信息流子项多种模式可以任意组合，模块间需要使用分割线区隔。配图不可清晰度过低，建议标题文字不超过 34 个中文字符。