当前位置: 代码迷 >> 综合 >> 小程序使用swiper,swiper-item做多个表单填写提交
  详细解决方案

小程序使用swiper,swiper-item做多个表单填写提交

热度:55   发布时间:2023-12-25 22:50:41.0

如图勾选多个 

 

1.定义页面.josn文件 "navigationStyle":"custom",自定义头部导航条,当点击返回图标时返回上一个项目表单,而不是返回上一页。//返回图标goback() {获取swiper的current,滑块的 index  if (this.data.current > 0) {this.setData({current: this.data.current - 1})return} else {wx.navigateBack({delta: 1})}},
1.先在swiper-item标签上添加catch:touchmove="capturecatchtouchmove",禁止手势滑动,只能点击‘填写下一项目’才能下一页表单capturecatchtouchmove(e) {return false},3填写下一个项目
<view bind:tap="nextTap" class="next-btn" data-index="{
   {index}}" wx:else>填写下一项目</view>
//下一个项目nextTap(event) {const { index } = event.currentTarget.dataset //滑块indexconst list = this.data.list[index] //对应的表单数据const reget = this.showMgs(list) //判断表单是否填写完整if (reget) {  // true时才能填写下一个表单项目this.setData({current: index + 1})}},4‘填写下一个项目’按钮与‘保存’按钮同时用一个点击事件,需要判断,但是 我分开写
<view bind:tap="sureTap" class="next-btn" data-index="{
   {index}}" wx:if="{
   {index === list.length-1}}">保存</view>
根据滑块index和数组长度判断是否是最后一项sureTap(event){const { index } = event.currentTarget.dataset //滑块indexconst list = this.data.list[index] //对应的表单数据const reget = this.showMgs(list) //判断表单是否填写完整弹个询问框或者直接调接口.......
}
  相关解决方案