更新记录

1.0.1(2024-07-05) 下载此版本

没有

1.0.0(2024-07-02) 下载此版本

1.0.0


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

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
感谢您使用和贡献该组件!如有任何问题,请随时与我们联系。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问