The wx.showActionSheet of the WeChat applet cannot exceed 6 options.

Solutions:

Because there are less cases where there are more than six, the main consideration is that the function can be used normally and the changes are minimized, so the paged display is adopted, and each page displays up to 5 options + next page options. The renderings are as follows:

Extension code:

/***
 * 扩展系统自带的showActionSheet,解决选项超过6个时无法使用问题
 */
const showActionSheet = function (config) {
  if (config.itemList.length > 6) {
    var myConfig = {};
    for (var i in config) { //for in 会遍历对象的属性,包括实例中和原型中的属性。(需要可访问,可枚举属性)
      myConfig[i] = config[i];
    }
    myConfig.page = 1;
    myConfig.itemListBak = config.itemList;
    myConfig.itemList = [];
    var successFun = config.success;
    myConfig.success = function (res) {
      if (res.tapIndex == 5) {//下一页
        myConfig.page++;
        showActionSheet(myConfig);
      } else {
        res.tapIndex = res.tapIndex + 5 * (myConfig.page-1);
        successFun(res);
      }
    }
    showActionSheet(myConfig);
    return ;
  }
  if (!config.page) {
    wx.showActionSheet(config);
  }else{
    var page = config.page;
    var itemListBak = config.itemListBak;
    var itemList = [];
    for (var i = 5 * (page - 1); i < 5 * page && i < itemListBak.length; i++) {
      itemList.push(itemListBak[i]);
    }
    if (5 * page < itemListBak.length) {
      itemList.push('下一页');
    }
    config.itemList = itemList;
    wx.showActionSheet(config);
  } 
}

The call is the same as wx.showActionSheet. Just change wx to the module corresponding to the above script.

For example, I wrote the above code in xpl.js. when using it:

const xpl = require("../../utils/xpl.js");

xpl.showActionSheet(config);

 

 

Guess you like

Origin blog.csdn.net/xiaozaq/article/details/107099233