Maison > Article > Applet WeChat > Comment implémenter la navigation par petite balle dans un mini programme (code)
Le contenu de cet article explique comment implémenter la navigation (code) de la petite boule dans le mini programme. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
wxml
<!-- 导航 --><view class='navBox'> <view class='navBtn' wx:for="{{navBtn}}" wx:key="{{index}}"> <image class='navImg' src='' style='background:{{item.bgc}}'></image> <view class='navName'>{{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: [{ 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#5098D2' }, { 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#DA70A0' }, { 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#DF975C' }, { 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#95B1FA' }, { 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#77BF6B' }, { 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#F1E85B' }, { 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#EC5D55' }, { 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#A3619E' }, ] } })
Recommandations associées :
Comment supprimer le petit cercle plein dans la barre de navigation_html/css_WEB-ITnose
Effet de navigation déroulant en haut de l'applet WeChat
Introduction à la méthode de réalisation d'une barre de progression circulaire dans l'applet WeChat
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!