How to implement small ball navigation in a mini program (code)-Mini Program Development-php.cn

How to implement small ball navigation in a mini program (code)

不言

Release： 2018-08-16 15:32:16

Original

2897 people have browsed it

The content of this article is about how to implement the navigation (code) of the small ball in the mini program. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

How to implement small ball navigation in a mini program (code)

##wxml

<!-- 导航 --><view class=&#39;navBox&#39;>
    <view class=&#39;navBtn&#39; wx:for="{{navBtn}}" wx:key="{{index}}">
        <image class=&#39;navImg&#39; src=&#39;&#39; style=&#39;background:{{item.bgc}}&#39;></image>
        <view class=&#39;navName&#39;>{{item.name}}</view>
    </view></view>

Copy after login

wxss

/* 导航 */
.navBox{
    display: flex;    
    flex-wrap: wrap;    
    height: 450rpx;    
    background: #fff;    
    margin-top: 15rpx;    
    padding: 20rpx 0;    
    box-sizing: border-box;    
    font-size: 9pt;
    }
.navBtn{
     width: 25%;   
     text-align: center;    
     padding-top: 15rpx;    
     box-sizing: border-box;
     }
.navImg{
    display:block;    
    width: 125rpx;    
    height:125rpx;    
    margin:0 auto;    
    border-radius: 50%;
    }
.navName{
    padding: 
    10rpx 0;
    }

Copy after login

Page({
    data: {
        navBtn: [{ &#39;name&#39;: &#39;模考题库&#39;, &#39;icon&#39;: &#39;&#39;, &#39;url&#39;: &#39;../tiku/tiku&#39;, &#39;bgc&#39;: &#39;#5098D2&#39; },
                 { &#39;name&#39;: &#39;模考题库&#39;, &#39;icon&#39;: &#39;&#39;, &#39;url&#39;: &#39;../tiku/tiku&#39;, &#39;bgc&#39;: &#39;#DA70A0&#39; },
                 { &#39;name&#39;: &#39;模考题库&#39;, &#39;icon&#39;: &#39;&#39;, &#39;url&#39;: &#39;../tiku/tiku&#39;, &#39;bgc&#39;: &#39;#DF975C&#39; },
                 { &#39;name&#39;: &#39;模考题库&#39;, &#39;icon&#39;: &#39;&#39;, &#39;url&#39;: &#39;../tiku/tiku&#39;, &#39;bgc&#39;: &#39;#95B1FA&#39; },
                 { &#39;name&#39;: &#39;模考题库&#39;, &#39;icon&#39;: &#39;&#39;, &#39;url&#39;: &#39;../tiku/tiku&#39;, &#39;bgc&#39;: &#39;#77BF6B&#39; },
                 { &#39;name&#39;: &#39;模考题库&#39;, &#39;icon&#39;: &#39;&#39;, &#39;url&#39;: &#39;../tiku/tiku&#39;, &#39;bgc&#39;: &#39;#F1E85B&#39; },
                 { &#39;name&#39;: &#39;模考题库&#39;, &#39;icon&#39;: &#39;&#39;, &#39;url&#39;: &#39;../tiku/tiku&#39;, &#39;bgc&#39;: &#39;#EC5D55&#39; },
                 { &#39;name&#39;: &#39;模考题库&#39;, &#39;icon&#39;: &#39;&#39;, &#39;url&#39;: &#39;../tiku/tiku&#39;, &#39;bgc&#39;: &#39;#A3619E&#39; },
                ]
    }
})

Copy after login

Related recommendations:

How to remove the small solid circle in the navigation bar_html/css_WEB-ITnose

Scrollable navigation effect at the top of the WeChat applet

Introduction to the method of realizing circular progress bar in WeChat applet

The above is the detailed content of How to implement small ball navigation in a mini program (code). For more information, please follow other related articles on the PHP Chinese website!