提交 6fde3b0e 编写于 作者: H hdx

custom-tab-bar: 调整 + 号按钮布局,提取到外层,解决事件触发问题。由于绝对定位不支持 margin: auto, 采用了 left:...

custom-tab-bar: 调整 + 号按钮布局,提取到外层,解决事件触发问题。由于绝对定位不支持 margin: auto, 采用了 left: 50%, margin-left: -35px 实现左右居中
上级 79f85e81
...@@ -18,11 +18,8 @@ ...@@ -18,11 +18,8 @@
</text> </text>
</view> </view>
</view> </view>
<view @click="onPlusClick"> <view>
<image class="concave-image" mode="heightFix" src="/static/template/custom-tab-bar/concave.png"></image> <image class="concave-image" mode="heightFix" src="/static/template/custom-tab-bar/concave.png"></image>
<view class="btn-plus">
<text class="btn-plus-text">+</text>
</view>
</view> </view>
<view class="tab-item" @click="onTabClick(1)"> <view class="tab-item" @click="onTabClick(1)">
<view ref="tab-item2" class="tab-item-content"> <view ref="tab-item2" class="tab-item-content">
...@@ -34,6 +31,9 @@ ...@@ -34,6 +31,9 @@
</view> </view>
</view> </view>
</view> </view>
<view class="btn-plus" @click="onPlusClick">
<text class="btn-plus-text">+</text>
</view>
</view> </view>
</template> </template>
...@@ -179,15 +179,14 @@ ...@@ -179,15 +179,14 @@
.btn-plus { .btn-plus {
position: absolute; position: absolute;
left: 43px; left: 50%;
width: 70px; width: 70px;
height: 70px; height: 70px;
bottom: 20px;
border-radius: 50px; border-radius: 50px;
background-color: #FE5722; background-color: #FE5722;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
/* margin-left: auto; margin-left: -35px;
margin-right: auto; */
margin-top: -35px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: visible; overflow: visible;
...@@ -197,4 +196,4 @@ ...@@ -197,4 +196,4 @@
color: #fff; color: #fff;
font-size: 32px; font-size: 32px;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册