微信小程序自定义tabbar组件点击对应区域显示凸起效果

最新推荐文章于 2025-03-17 17:43:38 发布

丶枕边人

最新推荐文章于 2025-03-17 17:43:38 发布

阅读量3.6k

点赞数 1

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/nan961136007/article/details/103913052

版权

本文介绍了如何在微信小程序中创建自定义tabbar组件，并实现点击区域显示凸起效果。通过创建template文件夹，包含wxml、wcss和js文件，以及在app.json和app.js中进行配置，实现tabbar组件的显示和隐藏。同时，提供了在不同页面引用该组件的步骤和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	今天呢，看到设计图，难搞啊，要自定义组件，是时候动动脑子了，哈哈。

我呢，方法用的比较笨，代码有点冗余了，还望体谅哈

在这里插入图片描述

首先呢，先创建template文件夹，里面包含wxml，wcss和 js

先来wxml代码吧

<view class='footer'>

  <view class='footer_list' data-current="{
  {0}}" bindtap="chooseImg">
    <image class="footer-image" hidden='{
  {curIdx===0}}' src="{
  {listInfo[0].imgUrl}}"></image>
    <view hidden='{
  {curIdx!==0}}' class="tab-img">
      <image class="footer-image2" src="{
  {listInfo[0].curUrl}}"></image>
    </view>
    <!-- 等于该id的话图标和名称就凸起来 -->
    <view class="footer-text">首页</view>
    <view hidden='{
  {curIdx!==0}}' class="footer-text2">首页</view>
  </view>

  <view class='footer_list' data-current="{
  {1}}" bindtap="chooseImg">
    <image class="footer-image" hidden='{
  {curIdx===1}}' src="{
  {listInfo[1].imgUrl}}"></image>
    <view hidden='{
  {curIdx!==1}}' class="tab-img">
      <image class="footer-image2" src="{
  {listInfo[1].curUrl}}"></image>
    </view>
    <view class="footer-text">分类</view>
    <view hidden='{
  {curIdx!==1}}' class="footer-text2">分类</view>
  </view>

  <view class='footer_list' data-current="{
  {2}}" bindtap="chooseImg">
    <image class="footer-image" hidden='{
  {curIdx===2}}' src="{
  {listInfo[2].img

最低0.47元/天解锁文章