快乐的小面包
2021-03-10 18:54
采纳率: 100%
浏览 144

关于微信小程序界面css样式的问题急急急求大佬!

最近在做微信小程序,商城分类界面的css样式出了问题好像,图片怎么也顶部上去

并附上代码

页面代码

<view class="types">

  <scroll-view 

  class="left"

  >

 

    <view class="{{index==activeIndex?'active':''}}"  bindtap="click" data-index="{{index}}" wx:for="{{types}}">

      {{item.name}}

    </view>

  </scroll-view>

  <scroll-view

  class="right"

  >

  <view class="tittle">

    查看{{tittle}} 下的所有产品 >

  </view>

  <view class="container">

   <image src="{{pic}}" class="pic"></image>

 

   <view > {{text}}12312312312312312</view>

  </view>


 

  </scroll-view>

</view>

 

 

css样式代码

/* pages/types/types.wxss */

page{

  background:#cccccc;

  height: 100%;

  font-size:32rpx;

}

 

.types{

  display: flex;

  height: 100%;

 

}

.left{

  flex:2;

  height: 100%;

}

.left view{

  text-align: center;

  height: 90rpx;

  background:#ffffff;

  line-height: 90rpx;

}

.right{

  flex:8;

  height: 800rpx;

}

.right .tittle{

  background:#ffffff;

  text-align:center; 

  width:90%;

  line-height: 90rpx;

  margin:20rpx auto  0;

  border-radius: 10rpx;

}

.right .container{

  width: 90%;

  background:#ffffff;

  /* height: 1000rpx; */

  margin:20rpx auto  0;

}

.active{

  background:#cccccc;

}

.container .pic{

  float: left;

}

.container .pic{

  width: 100%;

  height:100%;


 

}

 

.types .left .active{

  background:red;

}


 

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • Aganstrong 2021-03-10 19:13
    已采纳

    添代码片段吧,没有在控制台看下吗?

    点赞 打赏 评论
  • 快乐的小面包 2021-03-11 10:17

    解决了,主页面有重复的css样式删掉就就好了。麻烦各位了感谢!

    点赞 1 打赏 评论
  • Aganstrong 2021-03-10 19:23

    用控制台的小箭头放到图片那里看下目录结构

    点赞 打赏 评论
  • Aganstrong 2021-03-10 19:26

    开发者工具新建一个代码片段,生成连接放出来

    点赞 打赏 评论
  • 天际的海浪 2021-03-10 20:10

    .container .pic{
      width: 100%;
      /*height:100%;  这行去掉*/
    }
     

    点赞 打赏 评论
  • TXGadair 2021-06-18 11:45

    小程序里面的图片是由默认250的高度的,你要在 image 标签上 添加 mode 属性

    点赞 打赏 评论