百度智能小程序 信息流子项

feed-item 信息流子项

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

属性说明

示例 

在开发者工具中打开

代码示例

<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" rel="external nofollow" ></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 个中文字符。