微信小程序首页、界面布局、自定义顶部（示例一）

置顶

蒜鸟小窝

已于 2023-05-25 13:14:10 修改

阅读量5.6k

点赞数 10

分类专栏：微信小程序文章标签：微信小程序前端 javascript

于 2023-05-24 11:56:59 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45465881/article/details/130839830

版权

微信小程序首页、界面布局、自定义顶部搜索框（示例一）

具体界面见下图：
首页示例
如需界面中引用的图片文件和更多功能，请滑动至底部查看下载链接，可下载完整版，下载后直接使用微信开发者工具打开即可，完整版功能更详细呦。当前界面的布局样式代码如下（如存在不足之处，请根据具体需求，自行修改）：
1、js代码：

Page({
   
    /**
     * 页面的初始数据
     */
    data: {
   
        viewHeight: 640, // 默认高度
        navIndex: 0,
        tabList: [{
   
        		id: '1',
                src: '../../images/select.png',
                title: '菜单一'
            },
            {
   
            	id: '2',
                src: '../../images/sort.png',
                title: '菜单二'
            },
            {
   
            	id: '3',
                src: '../../images/select.png',
                title: '菜单三'
            },
            {
   
            	id: '4',
                src: '../../images/sort.png',
                title: '菜单四'
            }
        ],
        navList: [
            [
                [{
   
                        id: '1',
                        path: 'pages/path1/index', // 具体需要跳转至该界面的路径
                        img: '../../images/msg.png',
                        title: '功能一'
                    },
                    {
   
                        id: '2',
                        path: 'pages/path2/index',
                        img: '../../images/set.png',
                        title: '功能二'
                    },
                    {
   
                        id: '3',
                        path: 'pages/path3/index',
                        img: '../../images/msg.png',
                        title: '功能三'
                    },
                    {
   
                        id: '4',
                        path: 'pages/path4/index',
                        img: '../../images/set.png',
                        title: '功能四'
                    }
                ],
                [{
   
                        id: '5',
                        path: 'pages/path5/index',
                        img: '../../images/msg.png',
                        title: '功能五'
                    },
                    {
   
                        id: '6',
                        path: 'pages/path6/index',
                        img: '../../images/set.png',
                        title: '功能六'
                    },
                    {
   
                        id: '7',
                        path: 'pages/path7/index',
                        img: '../../images/msg.png',
                        title: '功能七'
                    },
                    {
   
                        id: '8',
                        path: 'pages/path8/index',
                        img: '../../images/set.png',
                        title: '功能八'
                    },
                ]
            ],
            [
                [{
   
                        id: '9',
                        path: 'pages/path9/index',
                        img: '../../images/set.png',
                        title: '功能A'
                    },
                    {
   
                        id: '10',
                        path: 'pages/path10/index',
                        img: '../../images/msg.png',
                        title: '功能B'
                    },
                    {
   
                        id: '11',
                        path: 'pages/path11/index',
                        img: '../../images/set.png',
                        title: '功能C'
                    },
                    {
   
                        id: '12',
                        path: 'pages/path12/index',
                        img: '../../images/msg.png',
                        title: '功能D'
                    }
                ],
            ]
        ],
        articleList