小程序里实现小圆球导航的代码详细解析

why 246 2024-08-06

本篇文章给大家带来的内容是关于小程序中如何实现小圆球的导航 （代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

小程序里实现小圆球导航的代码详细解析

wxml

1

2

3

4

5

<!-- 导航 --><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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

/* 导航 */

.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

1

2

3

4

5

6

7

8

9

10

11

12

13

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; },

                ]

    }

})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：解析 程序 代码 小程序 js
上一篇:微信小程序开发环境搭建的详细图文步骤
下一篇:微信小程序中修改数据包括页面数据和数组数据的代码实现方法
相关文章

 发表评论

暂时没有评论，来抢沙发吧~