最新消息：20210816 当前crifan.com域名已被污染，为防止失联，请关注（页面右下角的）公众号
    你的位置：在路上 > 列表 > 【已解决】小程序中列表中实现每行左边图片右边多行键值对的文字效果

    【已解决】小程序中列表中实现每行左边图片右边多行键值对的文字效果

    列表 crifan 683浏览 0评论
    折腾：
    【已解决】微信小程序开发工具中去画界面实现首页布局
    期间，已经实现数据显示到list列表中了，现在再去弄每行的布局：
    即：列表内每行内的左右布局：
    • 左边是图片
    • 右边是文字
      • 且多行，每行：
        • 左边是key
        • 右边是value
    现在用代码：
      <view wx:for="{{searchBookList}}" wx:for-index="bookIdx" wx:for-item="curBookItem">
    <view class='book_list_item'>
      <view class='book_item_logo'>
        <image
          class='book_item_logo_img'
          src="{{curBookItem.coverImgUrl}}"
          width="100"
          height="140"
        />
      </view>

      <view class='book_list_item_attributes'>
        <text class='book_list_item_title'>{{curBookItem.title}}</text>
        <view class='book_list_attribute_row'>
          <text class='book_list_attribute_key'>作者：</text>
          <text class='book_list_attribute_value'>{{curBookItem.author.bookAuthors}}</text>
        </view>
        <view class='book_list_attribute_row'>
          <text class='book_list_attribute_key'>兰斯指数：</text>
          <text class='book_list_attribute_value'>{{curBookItem.grading.lexile}}</text>
        </view>
        <view class='book_list_attribute_row'>
          <text class='book_list_attribute_key'>参考年龄：</text>
          <text class='book_list_attribute_value'>{{curBookItem.grading.age}}</text>
        </view>
        <view class='book_list_attribute_tags'>
          <view wx:for="{{curBookItem.tags}}" wx:for-index="tagIdx" wx:for-item="eachTag">
          <text class='book_single_tag'>{{eachTag}}</text>
          </view>  
        </view>
      </view>

    </view>
  </view>
    还没去加css
    效果是：
    先去解决警告：
    【已解决】小程序中for循环的list元素警告：Now you can provide attr “wx:key” for a “wx:for” to improve performance
    接下来就是：
    想办法实现，左边布局，和右边内部上下每行的布局了。
    参考：
    小程序入坑（一）list列表以及item详情页，json传送时间戳转换成年月日 – qq_38650223的博客 – CSDN博客
    用
    display:flex;
display:flex; flex-direction:column;
display:flex; flex-direction:row;
    微信小程序框架wxss-电话列表展示demo-教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
    <view class="list-item">  
   <image class="left" src="../../resources/headImg.jpg"></image>  
   <view class="right">  
     <view class="title">  
       <view class="name">name</view>  
       <view class="phone">phone</view>  
     </view>  
     <view class="time">time</view>  
   </view>  
</view>


.list-item{  
  height: 100rpx;  
  display: flex;  
  flex-direction: row;  
  padding:20rpx;  
}  
.left{  
  width: 100rpx;  
  height:100rpx;  
}  
.right{  
  width: 590rpx;  
  height: 100rpx;  
  margin-left: 20rpx;  
  display: flex;  
  flex-direction: row;  
}  
    之前还是再去看看：
    小程序 view 布局
    微信小程序 View布局 – 前端人公众号作者 – CSDN博客
    微信小程序 View：flex 布局-入门系列-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
    微信小程序开发:Flex布局 – 简书
    微信小程序进阶－flex布局 – 简书
    目前用如下配置：
    index.wxml
    <!--index.wxml-->
<view class="container">
  <view class="logo">
    <image class="img_logo" src="../../images/logo_144x144.png" alt="xxx Logo"></image>
  </view>

  <text class='app_title'>绘本查询精灵</text>

  <view class="section input_and_query">
    <input
      id="queryInput"
      bindinput='inputCallback'
      bindconfirm="inputConfirmCallback"
      type="text"
      placeholder="请输入要查询的英文绘本名称"
      value="">
    </input>
    <button id="queryButton" bindtap="submitQuery">查询</button>
  </view>

<view class='search_result_books'>
  <view
    wx:for="{{searchBookList}}"
    wx:for-index="bookIdx"
    wx:for-item="curBookItem"
    wx:key="id"

    class='book_list_item'
  >
    <view class='book_item_logo'>
      <image
        class='book_item_logo_img'
        src="{{curBookItem.coverImgUrl}}"
      />
    </view>

    <view class='book_list_item_attributes'>
      <view class='book_list_item_title'>{{curBookItem.title}}</view>
      <view class='book_list_attribute_row'>
        <text class='book_list_attribute_key'>作者：</text>
        <text class='book_list_attribute_value'>{{curBookItem.author.bookAuthors}}</text>
      </view>
      <view class='book_list_attribute_row'>
        <text class='book_list_attribute_key'>兰斯指数：</text>
        <text class='book_list_attribute_value'>{{curBookItem.grading.lexile}}</text>
      </view>
      <view class='book_list_attribute_row'>
        <text class='book_list_attribute_key'>参考年龄：</text>
        <text class='book_list_attribute_value'>{{curBookItem.grading.age}}</text>
      </view>
      <view class='book_list_attribute_tags'>
        <view
          wx:for="{{curBookItem.tags}}"
          wx:for-index="tagIdx"
          wx:for-item="eachTag"
          wx:key="*this"
        >
          <text class='book_single_tag'>{{eachTag}}</text>
        </view>  
      </view>
    </view>

  </view>
</view>

</view>
    index.wxss
    /**index.wxss**/

.img_logo{
  width: 120px;
  height: 120px;

  padding-top: 48px;
  padding-bottom: 25px;
}

.app_title{
  font-size: 24px;
  margin-bottom: 20px;
  font-family: "PingFangSC-Regular", "苹方", "Microsoft Yahei", "微软雅黑", "Heiti SC";
}

.input_and_query{
  height: 28px;

  width: 80%;

  /* width: 100%; */
  /* margin-left: 39px;
  margin-right: 39px; */
  /* padding-left: 39px;
  padding-right: 39px; */

  vertical-align: center;

  margin-bottom: 16px;
}

#queryInput{
  font-size: 13px;
  border-radius: 16px;
  /* height: 28px; */

  border: 1px solid #ced4da;

  float:left;
  width:75%;

  display: flex;
  align-items: center;
  justify-content: center;
}

#queryButton{
  margin-left: 5px;

  background-color: #61D2B3;

  font-size: 15px;
  border-radius: 16px;
  height: 28px;

  float:left;
  width:20%;

  display: flex;
  align-items: center;
  justify-content: center;
}


.search_result_books{
  padding-top: 28px;
  padding-bottom: 28px;
  margin-left: 15px;
  margin-right: 15px;
}

.book_list_item{
  display: flex;
  flex-direction:row;

  padding-bottom: 15px;

  font-size: 14px;
  color: #666666;
}

.book_item_logo_img{
  width: 100px;
  height: 140px;

  border-radius: 8px;
  margin-right: 22px;
}

.book_list_item_attributes{
  display: flex;
  flex-direction: column;

  /* font-family: PingFangSC-Light; */
  font-family: "PingFangSC-Medium", "Microsoft Yahei", "微软雅黑", "Heiti SC";
}

.book_list_item_title{
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
  color: #333333;

  line-height: 1.2;
}

.book_list_attribute_row{
  margin-bottom: 9px;

  line-height: 14px;
}

.book_list_attribute_key{
  color: #333333;
}

.book_list_attribute_value{

}
    基本上大部分实现了要显示的效果：
    先去解决图片显示问题：
    【基本解决】小程序中设置图片的宽和高的大小
    再去：
    【已解决】小程序中实现类似于Bootstrap中的tag标签
    【总结】
    此处用：
    index.wxml
      <view class='search_result_books'>
    <view
      wx:for="{{searchBookList}}"
      wx:for-index="bookIdx"
      wx:for-item="curBookItem"
      wx:key="id"

      class='book_list_item'
    >
      <view class='book_item_logo'>
        <image
          class='book_item_logo_img'
          src="{{curBookItem.coverImgUrl}}"
        />
      </view>

      <view class='book_list_item_attributes'>
        <view class='book_list_item_title'>{{curBookItem.title}}</view>
        <view class='book_list_attribute_row'>
          <text class='book_list_attribute_key'>作者：</text>
          <text class='book_list_attribute_value'>{{curBookItem.author.bookAuthors}}</text>
        </view>
        <view class='book_list_attribute_row'>
          <text class='book_list_attribute_key'>兰斯指数：</text>
          <text class='book_list_attribute_value'>{{curBookItem.grading.lexile}}</text>
        </view>
        <view class='book_list_attribute_row'>
          <text class='book_list_attribute_key'>参考年龄：</text>
          <text class='book_list_attribute_value'>{{curBookItem.grading.age}}</text>
        </view>
        <view class='book_list_attribute_tags'>
          <view
            wx:for="{{curBookItem.tags}}"
            wx:for-index="tagIdx"
            wx:for-item="eachTag"
            wx:key="*this"

            class='book_single_tag'
          >
            <text class='book_single_tag_value'>{{eachTag}}</text>
          </view>  
        </view>
      </view>

    </view>
  </view>
    和：
    index.wxss
    .search_result_books{
  padding-top: 28px;
  padding-bottom: 28px;
  margin-left: 15px;
  margin-right: 15px;
}

.book_list_item{
  display: flex;
  flex-direction:row;

  padding-bottom: 15px;

  font-size: 14px;
  color: #666666;
}

.book_item_logo_img{
  width: 100px;
  height: 140px;

  border-radius: 8px;
  margin-right: 22px;
}

.book_list_item_attributes{
  display: flex;
  flex-direction: column;

  /* font-family: PingFangSC-Light; */
  font-family: "PingFangSC-Medium", "Microsoft Yahei", "微软雅黑", "Heiti SC";
}

.book_list_item_title{
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
  color: #333333;

  line-height: 1.2;
}

.book_list_attribute_row{
  margin-bottom: 9px;

  line-height: 14px;
}

.book_list_attribute_key{
  color: #333333;
}

.book_list_attribute_value{

}

.book_single_tag{
  font-size: 12px;
  font-weight: 400;
  margin-right: 4px;
  padding-top: 1px;
  padding-bottom: 0;

  background-color: rgba(97, 210, 179, 0.8);
  color: rgba(255, 255, 255, 0.9);
  height: 15px;
  line-height: 14px;

  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;

  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}

.book_single_tag_value{

}

    基本上实现了：
    左边是图片，右边是文字，且文字从上到下的效果：


    转载请注明：在路上 » 【已解决】小程序中列表中实现每行左边图片右边多行键值对的文字效果

    Post Views: 542

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    Hi，您需要填写昵称和邮箱！

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    80 queries in 0.175 seconds, using 22.08MB memory