最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

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

列表 crifan 47浏览 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{

}

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


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

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
19 queries in 0.073 seconds, using 9.33MB memory