今天呢,看到设计图,难搞啊,要自定义组件,是时候动动脑子了,哈哈。
我呢,方法用的比较笨,代码有点冗余了,还望体谅哈
首先呢,先创建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