收藏
回答

为什么不是图片下面是文字的效果

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 工具 6.6.6 445

是代码出问题了吗???麻烦大家帮我看看原因,谢谢!

<view class="container">

 <view class="selection">

   <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

     <block wx:for="{{imgUrls}}" wx:key="quite">

       <swiper-item>

         <image src="{{item}}" class="slide-image" width="355" height="150" />

       </swiper-item>

     </block>

   </swiper>

 </view>

 <view class="selection">

   <view class="header">

     <text>精品推荐</text>

     <text class="text_all">全部精品</text>

   </view>

   <view class="content">

     <view class="content_item" wx:for="{{contentItem}}" wx:key="quite">

       <image src='{{img}}'></image>

       <view class="content_item_text">这里是标题</view>

     </view>

   </view>

 </view>

 <view class="selection">

   <view class="header">

     <text>热门评测</text>

     <text class="text_all">全部评测</text>

   </view>

   <view class="list_item" wx:for="{{imageitem}}">

     <view class="list_item_image" >

       <image src='../../../image/2.jpg'></image>

     </view>

     <view class="list_item_text">

     fdgdhgdhdh

     </view>

   </view>

 </view>

</view>




swiper{

 width: 100%;

 height: 340rpx;

}

swiper image{

display: block;

width: 100%;

height: 100%;

}

.header{

 border-left-width: 2px;

 border-left-style: solid;

 border-left-color: green;

 display: flex;

 justify-content: space-between;

 align-items: center;

}

.text_all{

 color: green;

 font-size: 12px;

}

.content{

 display: flex;

 flex-wrap: wrap;

 justify-content: center;

}

.content_item{

 width: 350rpx;

 height: 200rpx;

 background-color: blanchedalmond;

 margin: 5px;

 position: relative;

}

.content_item image{

 width: 100%;

 height: 100%;

}

.content_item_text{

 position: absolute;

 bottom: 0px;

 color: white;

 font-size: 15px;

 background: -webkit-linear-gradient(bottom,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0));

 height: 80rpx;

 width: 98%;

 display: flex;

 flex-direction: column;

 justify-content: flex-end;

 padding: (1%,1%,1%);

}

.list_item{

 display: flex;

 height: 500rpx;

 width: 100%;

 

}

.list_item_image{

 height: 100%;

 width: 100%;


}

.list_item_text{

 height: 200rpx;

 width: 100%;

 background: brown;

}


Page({


 /**

  * 页面的初始数据

  */

 data: {

   imgUrls: [

     'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',

     'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',

     'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',

     'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'

   ],

   indicatorDots: true,

   autoplay: true,

   interval: 5000,

   duration: 1000,

   img:[

     '../../../image/lunbo.jpg'

   ],

   contentItem:['','','',''],

   imageitem: ['', '', '', '','', '', '', ''

   ]

 },

})


回答关注问题邀请回答
收藏

2 个回答

  • 不爱你等于不要命
    不爱你等于不要命
    2018-05-15

    这是用模拟器看的效果,只显示图片,没文字,但是我定义了文字的。

    2018-05-15
    有用
    回复 3
    • 卢霄霄
      卢霄霄
      2018-05-15
      图片和文字的父亲设了display:flex,文字横排了;图片的父标签的高度设了100%,把文字挤下去了
      2018-05-15
      回复
    • 不爱你等于不要命
      不爱你等于不要命
      2018-05-15回复卢霄霄
      哥,这种怎么解决有代码可以帮忙改一下吗
      2018-05-15
      回复
    • 卢霄霄
      卢霄霄
      2018-05-15回复不爱你等于不要命
      哈哈哈 拒绝帮忙 只是布局的小问题 不是bug。慢慢折腾吧
      2018-05-15
      回复
  • 卢霄霄
    卢霄霄
    2018-05-15

    完全听不懂你在说什么,要帮你看什么

    2018-05-15
    有用
    回复 3
    • 不爱你等于不要命
      不爱你等于不要命
      2018-05-15
      本身的效果是配图下面是一行文字,现在的显示结果是,文字和图片并排显示。
      2018-05-15
      回复
    • 卢霄霄
      卢霄霄
      2018-05-15回复不爱你等于不要命
      精品推荐部分 是对的啊
      2018-05-15
      回复
    • 不爱你等于不要命
      不爱你等于不要命
      2018-05-15回复卢霄霄
      评测部分,那部分,只显示图片,下面的文字出不来
      2018-05-15
      回复
登录 后发表内容