Welcome to Qi-U Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
695 views
in Technique[技术] by (71.8m points)

小程序如何实现多个按钮元素flex两行布局,加上图片多层叠加互不影响?

各位老师好,在学习的过程中,碰到这样一个问题,实现起来比较复杂,不知道该怎么办,求指点。

现在主要的矛盾点是,昨天好不容易,解决了小程序按钮添加背景图的问题,就没法再给展示信息的icon图标定位,好崩溃,这个布局对于我来说太难了。

我自己拆解的思路是:

  • 首先按钮item元素考虑使用flex布局展示2列,行数直接复用;
  • 其次按钮元素上层添加背景图和黑色半透明遮罩;
  • 最后一层展示信息,包括一个icon图标和按钮标题文字,需要使用flex靠左对齐横向排列;
效果图:

image.png

图层拆解

image.png

我写的代码如下

wxml
<view class="menu-box">
      <view class="menu-list">
            <navigator class='menu-button' openType="switchTab" url="/pages/list/list">
                <view class="menu-mask"></view>
                <text>菜单入口1</text>
                <image mode="widthFix" src="/images/icon.png"></image>
                <image class="menu-image" src="https://cdn.image.com/text/background-image.jpg"></image>
            </navigator>
            <navigator class='menu-button' openType="switchTab" url="/pages/text/text">
              <view class="menu-mask"></view>
                <text>菜单入口2</text>
                <image mode="widthFix" src="/images/icon.png"></image>
                <image class="menu-image" src="https://cdn.image.com/text/background-image.jpg"></image>
             </navigator>
      </view>
</view>
wxss
.menu-box {
  margin-top: 20rpx;
}

.menu-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 24rpx;
  padding-right: 24rpx;
  padding-top: 24rpx;
}
.menu-list .munu-mask {
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity: 0.3;
  position: absolute;
  background-color: #111111;
}
.menu-button {
  display: flex;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
  width: 340rpx; 
  height: 110rpx;
}

.menu-box .menu-list .menu-button menu-image{
  width: 340rpx;
  height: 110rpx;
  border-radius: 10rpx;
}

.menu-box .menu-list .menu-button text{
  color: #ffffff;
  font-weight: 600;
  font-size: 28rpx;
  position: absolute;
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

Please log in or register to answer this question.

1 Answer

0 votes
by (71.8m points)
  1. 左右两边布局的可以使用百分比50%,然后float:left or right就行
  2. 透明的那个只需要添加opacity:0.几就行
  3. 最上面一层只要添加z-index:够高

image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Qi-U Community for programmer and developer-Open, Learning and Share
...