更新记录

1.0(2021-03-30)

基本没啥好介绍的,用官方slide组件改的,加了宫格样式罢了。 几点注意事项: 1、需指定图片高度,uni里对图片自适应基本是灾难,不指定高度很麻烦。 2、需指定组件的高度


平台兼容性

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

功能介绍

  • APP VUE绝对支持,其它需要自己测试,应该也是支持的。
  • 支持自定义行列的宫格。
  • 支持点击事件。

使用方法

  • 源码方式

    1. 点击上方的使用 HBuilder X 导入插件或将下载的插件包拷贝到项目根目录里
    2. 在需要使用页面的 (n)vue 文件中添加

      <zy-slideitem :slidelist="list" :rows="'100%'" :thumburl="http://www.www.com/"
      :imgheight="120" :colums="'33.33% 33.33% 33.33%'" 
      :heights="360" @click="sildeclick">
      export default {
      // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
      components: {
      
      },
      data() {
       return {
         list: [
             {id:1,title:"标题",thumb:"2022/12342.jpg"},
             {id:2,title:"标题",thumb:"2022/12342.jpg"},
             {id:3,title:"标题",thumb:"2022/12342.jpg"},
             {id:4,title:"标题",thumb:"2022/12342.jpg"},
             {id:5,title:"标题",thumb:"2022/12342.jpg"}
         ]
       }
      }
      }

组件属性

属性 类型 默认值 说明
slidelist Array JSON数组[{},{}]
rows String '50% 50%' 行数,百分比,一行则 '100%'
thumburl String 默认为空,或手动指定图片前缀,有些返回的图片没有域名时可手动指定前缀
imgheight Number 图片高度
heights Number 组件高度

组件事件

名称 触发时机
click 点击事件,sildeclick(data),data返回每个元素的数组,console.log(JSON.stringify(data))

问题反馈

组件很简单,仅作为宫格幻灯用,比如人气推荐等位置可用,本人用的HBX-A版,时时保持最新,目前APP端没遇到问题,由于暂无其它端的开发,所以其它端需要自己测试。 有问题可在此留言。邮箱46708420@qq.com

隐私、权限声明

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

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

不采集任何数据

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

许可协议

MIT协议

暂无用户评论。

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