weui picker 修改默认行高rowHeight（weui.js v1.0.0）

需求背景

移动端H5项目，需要做省市区三级联动选择框，如下图：

于是选择了weui库中的Picker组件

原始需求与默认Picker组件UI不一致

UI图中的选择框每行高度与weui picker默认的每行高度不一致。于是想要改变picker组件的rowHeight高度。在picker api中并没有提供设置rowHeight参数的接口。于是只能把源库下载到本地进行修改。

修改picker 默认的每行高度rowHeight

想要修改选择框每行高度，要从两方面考虑：
1、CSS修改

// 修改选框的高度，为了适配，rem作为单位
.weui-picker__indicator {
	height:.9rem;
}

2、JS修改（picker有滑动选择效果，涉及到一些滑动计算）

// 修改scroll方法,设置rowHeight为0.9rem,为了适配，这里设置为0.9*window.realFontSize
o.default.fn.scroll = function (e) {
   var t = this, n = o.default.extend({
       items: [],
       scrollable: ".weui-picker__content",
       offset: 2,
       // rowHeight: 32, // 原始每行高度，px为单位
       rowHeight: 0.9 * window.realFontSize,
       onChange: o.default.noop,
       temp: null,
       // bodyHeight: 476 // 可滑动content总高度
       bodyHeight: 0.9 * window.realFontSize * 5
   }, e), i = n.items.map(function (e) {....

// 修改计算当前选中行的方法
var g = function (e) {
   h += e, h = Math.round(h / n.rowHeight) * n.rowHeight;
   var i = f(n.offset, n.rowHeight), o = s(n.offset, n.rowHeight, n.items.length);
   h > i && (h = i), h < o && (h = o);
   // 原始计算当前选中行的方法，var l = n.offset - h / n.rowHeight
   // for (var l = n.offset - h / n.rowHeight; n.items[l] && n.items[l].disabled;)e > 0 ? ++l : --l;
   // 修改如下：，rem为单位，不同机型得到的实际px不一样，l = n.offset - h / n.rowHeight得到的结果为小数，例如58.99999999（IOS13），不是整数，导致有些机型无法正确选中每行数据，因此我们要对l取整Math.round()。
   for (var l = Math.round(n.offset - h / n.rowHeight); n.items[l] && n.items[l].disabled;)e > 0 ? ++l : --l;
   
   console.log('l', l, n.items[l])
    h = (n.offset - l) * n.rowHeight, r(a, .3), u(a, h), 
    // 触发onChange函数
    n.onChange.call(t, n.items[l], l)
 };

3、附计算realFontSize方法

(function () {
        var ua = navigator.userAgent;
        var isAndroid = /Android/i.test(ua);
        var DESIGN_WIDTH = 750;
        var DESIGN_dpr = 2;
        var DESIGN_ROOT_FONT_SIZE = 100;
        var dpr = window.devicePixelRatio;
        var dpiWidth = screen.width;
        if (isAndroid) {
            dpr = 1;
        }
        var realScale = 1 / dpr;
        document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=' +
            realScale + ', maximum-scale=' + realScale + ', minimum-scale=' + realScale + '" />');
        var docWidth = document.documentElement.getBoundingClientRect().width;
        if (isAndroid) {
            dpiWidth = docWidth;
        }
        var realFontSize = dpiWidth * dpr / DESIGN_WIDTH * DESIGN_ROOT_FONT_SIZE;
        window.realFontSize = realFontSize;
        document.getElementsByTagName("html")[0].style.fontSize = realFontSize + "px";
    })();