Heim > Artikel > WeChat-Applet > So implementieren Sie die Navigation mit kleinen Bällen in einem Miniprogramm (Code)
Der Inhalt dieses Artikels befasst sich mit der Implementierung der Navigation (Code) des kleinen Balls im Miniprogramm. Ich hoffe, dass er für Sie hilfreich ist.
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' }, ] } })
Verwandte Empfehlungen:
So entfernen Sie den kleinen durchgezogenen Kreis in der Navigationsleiste_html/css_WEB-ITnose
Scrollbarer Navigationseffekt oben im WeChat-Applet
Einführung in die Methode zur Realisierung eines kreisförmigen Fortschrittsbalkens im WeChat-Applet
Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Navigation mit kleinen Bällen in einem Miniprogramm (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!