介绍 me-waterfall 是一个微信小程序瀑布流组件库，实现简单，侵入性小，贴近 web 端的效果。 线上体验 扫描下方的小程序二维码，体验使用效果： [图片] 安装 方式一：使用 npm 安装（推荐） [代码]npm install me-waterfall [代码] 方式二：下载源码 将源码下载到本地，然后将 [代码]lib[代码] 目录拷贝到自己的项目中。 使用方法 在页面的 [代码]json[代码] 文件或 [代码]app.json[代码] 中引入组件： [代码]{ "usingComponents": { "me-waterfall": "/path/to/me-waterfall/waterfall/index", "me-waterfall-item": "/path/to/me-waterfall/waterfall-item/index" } } [代码] 然后就可以在 [代码]wxml[代码] 中直接使用了： [代码]<me-waterfall> <me-waterfall-item wx:for="{{list}}" wx:key="{{index}}"> <image src="{{item.src}}" style="height:{{item.height}}px;width:100%"/> </me-waterfall-item> </me-waterfall> [代码] API waterfall 组件 props 参数 说明 类型 默认值 是否必须 width 容器宽度，传入后将优先使用此值，呈现速度更快 Number - 否 column 列数 Number 2 否 gap 列与列之间的间距 Number 15 否 methods reflow 重新排列元素，在某些情形下，你可能希望在完成某些操作后对瀑布流进行重新排列，此时可以调用此方法： [代码]const waterfallInstance = this.selectComponent("#waterfall"); waterfallInstance.reflow(); [代码] 外部样式类 参数 说明 类型 默认值 是否必须 custom-class 外部样式类 String - 否 waterfall-item 组件 外部样式类 参数 说明 类型 默认值 是否必须 custom-class 外部样式类 String - 否 关于性能 首先，够用； 其次，由于微信小程序中获取元素尺寸的 api 为回调形式，因此排列内部元素时需要延迟，即等到容器宽度取到之后再进行排列，这会使得瀑布流呈现速度减慢；如果改为传入 [代码]width[代码]，呈现速度会更快。 捐赠 如果这个库有帮助，请 Star 这个仓库，让更多人发现它。 当然，也可以鼓励我一下： [图片] 开源协议 本项目基于 MIT 协议。

/* wxss */ page {   background-color: #EEEEEE; } /* 详细信息展示样式 */ .page { display: flex; flex-direction: column; justify-content: center; align-items: center; } .container { padding-bottom: 5rpx; } .panel { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; box-sizing: border-box; width: 710rpx; margin-top: 15rpx; border-radius: 10rpx; background-color: #FFFFFF; } page {    --canvas-hight:800px; } .wricont{   width:100%;   height:var(--canvas-hight);   align-items: center;   display: flex; } .canvastyle{   height:100%;   width:100%;   background-color: #f5f5f5; } <!-- wxml --> <view class="container page">   <view class="panel">     <view class="wricont" style="{{viewData.style}}">       <canvas class="canvastyle" canvas-id="myCanvas" id='myCanvas' bindtouchstart="beg_t" bindtouchmove="move_t"></canvas>    </view>    <view style="display:flex;align-items:center;height: 50px;">         <button size="mini" type="warn" class="btn1" bindtap="clear">重写</button>         <button size="mini" type="default"  class="btn2" bindtap="save">确认</button>       </view>   </view> </view> // json {   "usingComponents": {},   "navigationBarTitleText": "签名确认",   "disableScroll":true } //js代码 var x = 0 var y = 0 var w = 0 var h = 0 let myStyle = ` --canvas-hight:1000px; ` Page({   data: {     viewData: {       style: myStyle     },     ctx:'',     image:[]   },   onLoad(options) {     var that = this     const ctx = wx.createCanvasContext('myCanvas')     //获取手机屏幕高度和宽度     wx.getSystemInfo({       success (res) {         w = res.windowWidth-28         let h0 = res.windowHeight-110         h =  res.windowHeight-120         console.log(w,h)         //根据手机高自适应         var chageStyle = `--canvas-hight:`+h0+'px;'         that.setData({'viewData.style': chageStyle})         //外线框颜色         ctx.setStrokeStyle('grey')         ctx.fill('red')         //画一哥矩形         ctx.rect(2, 2, w, h)         // 设定虚线（【实线长，虚线长】，虚线偏移量）         ctx.setLineDash([10, 10], 5);         //矩形线宽         ctx.setLineWidth(2)         //画布底色，不设定导出来图片背景默认黑色，         ctx.setFillStyle('#f5f5f5')         //画布底色大小，         ctx.fillRect(2, 2, w, h)         ctx.stroke()         ctx.draw()         that.setData({           ctx:ctx         })       }     })   },   beg_t(e) {    //开始触摸位置，     x = e.changedTouches[0].x     y = e.changedTouches[0].y     console.log(x,y);     console.log(e);   },   move_t(e) {     //开始写     var ctx = this.data.ctx     var x1 = e.changedTouches[0].x     var y1 = e.changedTouches[0].y     //指针移到开始触摸位置     ctx.moveTo(x, y)     //线条黑色     ctx.setStrokeStyle('black')      //线条宽度     ctx.setLineWidth(5)     // 设定虚线（【实线长，虚线长】，虚线偏移量）     ctx.setLineDash([10, 0], 5);     //画点（x，y）到点（x1，y1）     ctx.lineTo(x1, y1)     ctx.stroke()     // ctx.draw(true)  设定true后，保留前面的draw(),不会被清空。     ctx.draw(true)     x = x1     y = y1     this.setData({       ctx:ctx     })     console.log(x,y);   },   clear:function(){     var that = this     var ctx = this.data.ctx     //线条颜色     ctx.setStrokeStyle('grey')     ctx.rect(2, 2, w, h)     // 设定虚线（【实线长，虚线长】，虚线偏移量）     ctx.setLineDash([10, 10], 5);     //线宽     ctx.setLineWidth(2)     ctx.stroke()     ctx.draw()     that.setData({       ctx:ctx     })   },   save:function(){     var that = this     wx.canvasToTempFilePath({      x: 2,      y: 2,      width: w,      height: h,      destWidth: w,      destHeight: h,      canvasId: 'myCanvas',      success(res) {        console.log(res.tempFilePath)        that.setData({          ["image[0]"]:res.tempFilePath,        })        wx.previewImage({          current:that.data.image[0],          urls:that.data.image        });      }    })   } })