微信小程序资讯列表组件

乾卦三爻

于 2022-03-31 10:49:44 发布

阅读量2.2k

点赞数 1

文章标签： javascript 微信小程序前端

本文链接：https://blog.youkuaiyun.com/weixin_46325225/article/details/123865480

版权

本文介绍了如何在微信小程序中创建一个资讯列表组件，包括两种情况：无图片时，文字单行并溢出省略，日期居右；有图片时，文字限制为两行并省略，日期居左。提供了相应的wxml、wxss和js代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、列表不包含图片，文字单行溢出省略，日期靠右
在这里插入图片描述
2、有图片时，文字2行且溢出省略，没有图片时文字单行溢出省略，日期靠左

message-list.wxml

<view wx:if="{
   {imgShow}}">
    <view wx:for="{
   {dataList}}" wx:key="index" class="message-item-icon" bindtap="toMessageInfo">
        <view class="left">
            <text>{
   {
   item.newsTitle}}</text>
            <view class="bottom">
                <text>阅读( {
   {
   item.readNumber}} )</text>
                <text>评论( {
   {
   item.partyNewsComment}} )</text>
                <text>{
   {
   item.newsTime}}</text>
            </view>
        </view>
        <view class="right" wx:if="{
   {item.image}}">
          <image src="../../images/common-icon/{
   {item.image}}"></

最低0.47元/天解锁文章