Lucky'Dog 2022-08-23 21:40 采纳率: 75%
浏览 51
已结题

微信小程序的样式格式

问题遇到的现象和发生背景

实在找不到解决办法了,代码写的也乱糟糟的,希望大家能帮我把
这个样式

img


改为

img

本来尝试了articl-block:nth-of-type(1){
merggin-top:50rpx}
发现这个筛选那一行也跟着动了

问题相关代码,请勿粘贴截图
WXML
 
<view class="sreenBigBox">
  <view class="sreenBox">
    <view class="sreenItems">
      <view class='sreen ' bindtap="sreenShow">筛选<image class='head {{sreenShow&&"rotating"}}' src="/images/tips/79.png"/></view>
      <view class="sort" bindtap="showModal">新手教学<image class='head {{sortShow&&"rotating"}}' src="/images/tips/new.png"/></view>
    </view>
  </view>
  
    
<view class="sreenConainer" style="height:{{sreenShow?2000:0}}rpx">
  <view class="chooseBox">
    <scroll-view  class="typeBox">
      <view class="typeItems" wx:for="{{typeItems}}" wx:key="*this"
        bindtap="chooseType" data-index="{{index}}">
        <text class="typeItem {{index===typeCurrentIndex?'typeItemAdd':''}}">{{item}}</text>
      </view>
    </scroll-view>
    <scroll-view class="chooseItems" scroll-y> 
             <block wx:for="{{chooseItems[typeCurrentIndex]}}" wx:key="key">
               <view class='ItemLabel {{item.selected===true?"choosing":""}}' data-value="{{item.name}}" bindtap="chooseItem" checked="{{item.selected}}" data-index="{{index}}">
                {{item.name}}                                  
               </view>
             </block>
    </scroll-view>
  </view>
   <view class="buttonConainer">
     <button class="cancel" size="mini" bindtap="cancel">取  消</button>
     <button class="clear" size="mini" bindtap="clear">清  除</button>
     <button class="confirm"  size="mini" bindtap="confirm">确  认</button>
   </view>
   <view style="width: 100%;"/>
   <view class='mask' v-if="{{flag}}" bindtap="mask"></view>
</view>
<view class="sreenConainer" style="height:{{sortShow?1000:0}}rpx">  
</view>
</view>

<view >
<view class="article-block" wx:for="{{ ArticleLists }}" wx:key="index" bindtap="copybv" data-bv="{{ item.bv}}">
    <view class="article-text">
      <view class="article-title">{{ item.title }}</view>
  </view>
</view>
</view>

WXSS
/* 筛选 */
.sreenBigBox{
  position: fixed;
  z-index: 999;
}
.sreenBox{
  display: flex;
  flex-direction:unset;
  background-color: white;
  width: 750rpx;
  height: 70rpx;
  z-index: 999999999999;
  border-bottom-width:2rpx;
  border-bottom-style:solid;
  border-bottom-color:#f1f2f3
}
.sreenItems{
  display: flex;
  flex-direction: unset;
  align-items: center;
  flex:2;
}
.sort,
.sreen{
  position: relative;
  display: flex;
  align-items: center;
  background-color: #f1f1f1;
  color: #666666;
  font-size: 25rpx;
  font-weight: 500;
  border-radius: 20rpx;
  margin-left: 6%;
  padding:0.7em;
  height: 70%;
  letter-spacing: 0.3em;
}
.head{
  height: 25rpx;
  width: 25rpx;
}
.rotating{
  transform: rotate(90deg);
  transition: all 600ms;
}
.specailItems{
  display: flex;
  flex-direction: unset;
  flex:1;
}


 
/* 下拉框 */
.sreenConainer{
  z-index: 999;
  position: fixed;
  width: 100%;
  overflow: hidden;
  transition: height 200ms;
  display: flex;
  flex-direction: column;
}
.chooseBox{
  display: flex;
  flex-direction:unset;
  border-bottom-width:2rpx;
  border-bottom-style:solid;
  border-bottom-color:#f1f2f3;
  background-color: white;
}
.typeBox{
  display: flex;
  flex-direction:column;
  flex:0.8;
  margin-bottom: 25rpx;
  border-right-width:2rpx;
  border-right-style:solid;
  border-right-color:#f1f2f3
}
.typeItems{
  margin-top: 25rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.typeItem{
  display: flex;
  color: #696969;
  font-weight: 500;
  height: 30rpx;
  font-size: 25rpx;
  padding: 0rpx 10rpx 0rpx 10rpx;
  letter-spacing: 0.3em;
}
.typeItemAdd{
  border-left: 7rpx solid #96bff0;
}
.chooseItems{
  flex:3;
  display: flex;
  margin-top: 20rpx;
}
.ItemLabel{
  display: inline-block;
  width: 100rpx;
  font-size: 25rpx;
  text-align: center;
  line-height: 60rpx;
  font-weight: 400;
  color:#696969;
}
.choosing{
  color: #96bff0;
  font-weight: 600;
}
.buttonConainer{
  background-color: white;
  height: 90rpx;
  display: flex;
}
.cancel{
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 50rpx;
  width: 130rpx !important;
  color: #6a6a6a;
  background-color: #f1f1f1;
  font-size: 28rpx !important;
  margin-top: 15rpx;
  margin-bottom: 15rpx;
  margin-left: 100rpx;
  margin-right: 30rpx;
}
.clear{
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 50rpx;
  width: 130rpx !important;
  color: #6a6a6a;
  background-color: #f1f1f1;
  font-size: 28rpx !important;
  margin-top: 15rpx;
  margin-bottom: 15rpx;
  margin-left: 40rpx;
  margin-right: 30rpx;
}
.confirm{
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 50rpx;
  width: 200rpx !important;
  color: #ffffff;
  background-color: #6b9edd;
  font-size: 28rpx !important;
  margin-top: 15rpx;
  margin-bottom: 15rpx;
  margin-left: 35rpx;
  margin-right: 30rpx;
}
/* 遮罩层 */
.mask{
  margin-top: 560rpx;
  width:100%;
  height:100%;
  position:absolute;
  background-color:#999;
  z-index:9999;
  top:0;
  left:0;
  opacity:0.5;
}
.home-block {
  margin-bottom: 200rpx;
}

.article-block {
  display: flex;
  height: 50rpx;
  width: 350rpx;
  margin: 0rpx 50rpx 0 50rpx;
  padding: 20rpx 0 20rpx 0;
  border-top: 1rpx solid rgba(222, 222, 222, 0.5);
}


.article-text {
  position:absolute;    /* 父元素绝对定位 */
  flex: 1;
  height: 22rpx;
  width: 1000rpx;
}

.article-title {
  position: absolute;    /* 垂直居上 */
  top: 10rpx;    /* 垂直居上 */
  font-size: 28rpx;
  padding-bottom: 10rpx;
  font-weight: bold;
}
.article-content{
  position: absolute;    /* 垂直居上 */
  top: 60rpx;    /* 垂直居上 */
  font-size: 28rpx;
  padding-bottom: 10rpx;
}

.article-time {
  position: absolute;    /* 垂直居下 */
  bottom: 0rpx;    /* 垂直居下 */
  font-size: 22rpx;
  color: darkgrey;
  padding-bottom: 10rpx;
}

.article-image {
  position: absolute;
  right: 30rpx;
  width: 300rpx;
  height: 200rpx;
}
我的解答思路和尝试过的方法

本来尝试了articl-block:nth-of-type(1){
merggin-top:50rpx}但是失败了

  • 写回答

2条回答 默认 最新

  • 爱新觉罗·苟子 2022-08-24 10:43
    关注

    position: fixed;会脱离文档流, 问题应该出在这里 。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 9月13日
  • 已采纳回答 9月8日
  • 创建了问题 8月23日

悬赏问题

  • ¥15 STM32驱动继电器
  • ¥15 Windows server update services
  • ¥15 关于#c语言#的问题:我现在在做一个墨水屏设计,2.9英寸的小屏怎么换4.2英寸大屏
  • ¥15 模糊pid与pid仿真结果几乎一样
  • ¥15 java的GUI的运用
  • ¥15 我想付费需要AKM公司DSP开发资料及相关开发。
  • ¥15 怎么配置广告联盟瀑布流
  • ¥15 Rstudio 保存代码闪退
  • ¥20 win系统的PYQT程序生成的数据如何放入云服务器阿里云window版?
  • ¥50 invest生境质量模块