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 已读

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 代码示例

    <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 个中文字符。