ミニプログラム(コード)で小さなボールナビゲーションを実装する方法

不言
リリース: 2018-08-16 15:32:16
オリジナル
2879 人が閲覧しました

この記事の内容は、ミニ プログラムでの小さなボールのナビゲーション (コード) の実装方法に関するものです。必要な方は参考にしていただければ幸いです。

ミニプログラム(コード)で小さなボールナビゲーションを実装する方法

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>
ログイン後にコピー

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;
    }
ログイン後にコピー

js

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; },
                ]
    }
})
ログイン後にコピー

関連推奨事項:

ナビゲーションバーの小さな実線の円を削除する方法_html/css_WEB-ITnose

Sc WeChat の上部にあるロール可能なナビゲーションミニプログラム効果

WeChatアプレットで円形のプログレスバーを実現する方法の紹介

以上がミニプログラム(コード)で小さなボールナビゲーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート