微信小程序底部弹出选择页面wx.showActionSheet

 博主介绍：本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；

🍅希望此文章可以帮助到您🍅

微信小程序文章推荐

微信小程序布局图片上面显示文字

微信小程序实现左边图片右边文字效果

微信小程序获取当前日期和时间

  微信小程序绘制地图轨迹线路

微信小程序绘制marker

微信小程序之绘制多个marker以及调用手机地图软件导航

效果显示一

1、前端界面

前端页面值需要设置一个点击事件就可以了

  <view class="inputView">

      <view class="inputTipWenZi">

        <view style="color: #f00;">*</view>

        准驾车型：

      </view>

      <view bindtap="choiceKSKM" class="choicewidth">

        {{choicechexing}}

      </view>

    </view>

2、js逻辑处理

data: {

choiceArrKSKM: ['公共、区域科目考试', '公共科目考试', '区域科目考试'],

}

  //选择准驾车型

  choiceKSKM: function () {

    var that = this;

    wx.showActionSheet({

      alertText: "请选择考试科目",

      itemList: that.data.choiceArrKSKM,

      success(res) {

        console.log(res.tapIndex)

        that.setData({

          choicekaoshikemu: that.data.choiceArrKSKM[res.tapIndex]

        }

        )

      },

      fail(res) {

        console.log(res.errMsg)

      }

    })

  },

                     

效果显示二

对于效果而是处理效果一不能显示6个以上选项的问题，使用第三方的UI插件完成

1：json文件引入

{

  "usingComponents": {

      "mp-actionSheet": "../../components/weui-miniprogram/actionsheet/actionsheet",      

  }

}

2、前端界面

<mp-actionSheet bindactiontap="btnClick" show="{{showActionsheet}}" actions="{{choiceArrCX}}" title="请选择准驾车型">

</mp-actionSheet>

说明：首先在json文件里面引入文件

3、js设置数据

 data: {

 choiceArrCX: [

    { text: 'A1', value: 'A1' },

    { text: 'A2', value: 'A2' },

    { text: 'A3', value: 'A3' },

    { text: 'B1', value: 'B1' },

    { text: 'B2', value: 'B2' },

    { text: 'C1', value: 'C1' },

    { text: 'C2', value: 'C2' }],

}

//点击事件

  btnClick(e) {

    console.log(e.detail.value)

    var selectInfor = e.detail.value;

    this.setData({

      showActionsheet: false,

      choicechexing: selectInfor

    });

  },

三、留个脚印吧

大家要是感觉此篇文章有意义；那就给个关注、点赞，收藏吧；

🍅也可以关注文档末尾公众号🍅