更新记录

1.0.1（2024-07-05）

没有

1.0.0（2024-07-02）

1.0.0

平台兼容性

uni-app

uni-app x

jonej-index

/**
 * ---------------导航栏区域参数---------------
 * @property {Object} navbarObject 导航栏参数
 * show {Boolean} 导航栏是否显示
 * isBack {Boolean} 是否显示导航栏左边返回图标和辅助文字
 * titleSize {Number} 导航栏标题字体大小，单位rpx
 * backIconName {String} 左边返回图标的名称，只能为uView自带的图标
 * backText {String} 返回图标右边的辅助提示文字
 * -------------------------------------------
 * 
 * ---------------轮播区域参数---------------
 * @property {Object} swiperObject 轮播参数
 * list {Array} 轮播数据
 * name {String} list参数中的属性名
 * indicatorPos {String} 指示器的位置 topLeft / topCenter / topRight / bottomLeft / bottomRight 默认topRight
 * height {String | Number} 轮播图组件高度，单位rpx 默认400
 * effect3d {Boolean} 是否开启3D效果 默认 false
 * autoplay {Boolean} 是否自动播放 默认 true
 * interval {String | Number} 自动轮播时间间隔，单位ms 默认2500
 * circular {Boolean} 是否衔接播放 默认 true
 * duration {String | Number} 切换一张轮播图所需的时间，单位ms 默认500
 * borderRadius {String | Number} 轮播图圆角值，单位rpx 默认 8
 * -----------------------------------------
 * 
 * ---------------四宫格区域参数---------------
 * @property {Object} fourboxGridList 轮播参数
 * list {Array} 数据
 * -----------------------------------------
 * 
 * ---------------用户信息区域参数---------------
 * @property {Object} userinfo 用户信息参数
 * list {Array} 用户数据
 * -----------------------------------------
 * 
 * ---------------多功能区域数据---------------
 * @property {Array} multifunction 多功能参数
 * -----------------------------------------
 */

使用方法

1. 在你的Vue项目中，将"jonej-index"组件导入到你的项目中。

2. 在需要使用该组件的页面中，使用以下代码添加组件：

<jonej-index :navbarObject="navbarObject" :swiperObject="swiperObject" :fourboxGridList="fourboxGridList"
    :userinfo="userinfo" :multifunction="multifunction" :rcList="rcList" @handleSwiper="handleSwiper"
    @handlefourboxGrid="handlefourboxGrid"></jonej-index>

export default {
    data() {
        return {
            // 魔方数据
            rcList: [{
                title: '测试1',
                thumb: '@/static/image/ces.png',
                url: ''
            }, {
                title: '测试2',
                thumb: '../../../static/image/ces.png',
                url: ''
            }, 
            {
                title: '测试3',
                thumb: '../../../static/image/4aud7fdra2jopqpa2lnuatiidp.png',
                url: ''
            }, {
                title: '测试4',
                thumb: '../../../static/image/4aud7fdra2jopqpa2lnuatiidp.png',
                url: ''
            }
            ],
            // 多功能数据
            multifunction: [{
                title: '测试1',
                thumb: '../../../static/image/4aud7fdra2jopqpa2lnuatiidp.png',
                url: ''
            }, {
                title: '测试2',
                thumb: '../../../static/image/4aud7fdra2jopqpa2lnuatiidp.png',
                url: ''
            }, {
                title: '测试3',
                thumb: '../../../static/image/4aud7fdra2jopqpa2lnuatiidp.png',
                url: ''
            }, {
                title: '测试4',
                thumb: '../../../static/image/4aud7fdra2jopqpa2lnuatiidp.png',
                url: ''
            }],
            // 用户信息
            userinfo: {
                headImg: '',
                list: {
                    member_name: '测试',
                    level_name: '等级',
                    credit: '积分',
                    coupon: 0,
                    card: 0
                }
            },
            // 四空格数据
            fourboxGridList: {
                list: [{
                    title: '测试1',
                    thumb: '../../../static/image/4aud7fdra2jopqpa2lnuatiidp.png',
                    url: ''
                }, {
                    title: '测试2',
                    thumb: '../../../static/image/4aud7fdra2jopqpa2lnuatiidp.png',
                    url: ''
                }, {
                    title: '测试3',
                    thumb: '../../../static/image/4aud7fdra2jopqpa2lnuatiidp.png',
                    url: ''
                }, {
                    title: '测试4',
                    thumb: '../../../static/image/4aud7fdra2jopqpa2lnuatiidp.png',
                    url: ''
                }],
            },
            // 轮播图数据
            swiperObject: {
                name: 'image',
                list: [{
                        image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
                        title: '昨夜星辰昨夜风，画楼西畔桂堂东',
                        url: '11111'
                    },
                    {
                        image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
                        title: '身无彩凤双飞翼，心有灵犀一点通',
                        url: ''
                    },
                    {
                        image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
                        title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
                        url: ''
                    }
                ]
            },
            // 导航栏数据 
            navbarObject: {
                show: true,
                title: '测试',
            }
        }
    },
    methods: {
        // 轮播事件
        handleSwiper(item) {
            console.log("轮播");
            console.log(item.url);
        },
        // 四宫格事件
        handlefourboxGrid(item) {
            console.log("四宫格事件");
            console.log(item);
        },
    }
}

注意事项

请确保您的Vue项目已正确配置并能够运行微信小程序。

该组件依赖于微信小程序的相关API，因此仅适用于在微信小程序中使用。

请注意文件路径和相关配置，以确保文件的正确保存和打开。

如果遇到问题或错误，请查看代码中的注释和相关文档，或参考Vue和微信小程序的官方文档。

贡献

欢迎对该组件进行改进和贡献。如果您发现问题或有任何建议，请提交问题或提出请求。 版权和许可 该文件的版权归原作者所有。请遵循相关的许可证要求进行使用和分发。

作者

作者：Jake
联系方式：2889044820@qq.com
感谢您使用和贡献该组件！如有任何问题，请随时与我们联系。