百度智能小程序 信息流子項(xiàng)

feed-item 信息流子項(xiàng)

解釋： 信息流子項(xiàng)，包括左文右圖、純文本、上文下圖、多圖及視頻模式。

屬性說明

示例 

在開發(fā)者工具中打開

代碼示例

<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: '寵物自己在家時(shí), 如何幫助它度過孤獨(dú)時(shí)光',
                    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: '歐洲各地被遺忘的地方，似乎時(shí)間被施了魔法一樣，一切都已經(jīng)停止了',
                    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: '跟貓主子過圣誕節(jié)要什么男朋友，單身朋友的福音',
                    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: '跟貓主子過圣誕節(jié)要什么男朋友，單身朋友的福音',
                    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裝修流行趨勢指南，小戶型也有大空間，簡單實(shí)用',
                    infoSource: '實(shí)用家裝',
                    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： 信息流子項(xiàng)多種模式可以任意組合，模塊間需要使用分割線區(qū)隔。配圖不可清晰度過低，建議標(biāo)題文字不超過 34 個(gè)中文字符。