小程序集合

目录

• 问题集合
  • 页面弹出背景滚动
  • 表单绑定bindsubmit无效

问题集合

页面弹出背景滚动

在页面中弹窗弹出，对弹窗内容进行滑动以后，背景内容也进行滚动。

解决方案1、对弹出的页面设定属性 catchtouchmove="move

  <div
      catchtouchmove="move"
      class="c-modal-example"
      v-if="modal.visable"
      @click="close">
    <a @click="close"></a>
    <div class="content">
        <img
          src="/static/WechatIMG8076.jpeg"
          mode="aspectFit"
          :class="{
            'example__img__is-iphonex': device.isMiniProgramIsIPhoneX
          }">
    </div>
  </div>

解决方案2、对背景页面内容固定 :scroll-y="false"

    <scroll-view
      :scroll-y="false"
      @scrolltolower="getProducts"
      :style="{ height: windowHeight + 'px'}">
      <div class="tip" v-if="tipVisable">
        <div class="tip__icon">
          <img src="/static/tip-ted.jpg">
        </div>
        <div class="tip__cell">
          <a @click="tipVisable = !tipVisable"></a>
          <h1>Hi Devin</h1>
          <p>Movin Poster is a tool to create your own item poster to share in your Wechat moments or on any social platforms.</p>
          <span @click="showModalExample">See an example</span>
        </div>
      </div>
      <c-btn
        type="primary"
        @click="createPoster"
        suspend>
        Create poster
      </c-btn>
      <c-modal-example />
    </scroll-view>

form bindsubmit="formSubmit"无效

在mpvue中实现消息模版推送，发现总是提示 Do not have formSubmit handler in current page ，是因为在mpvue中绑定from提交事件的写法需要变成：@submit="postFormId"

> 解决方案1(demo)

<template>
  <div class="c-product-cards">
    <a v-if="items" v-for="(item, index) in items" :key="index">
      <form @submit="postFormId" report-submit="true">
        <button formType="submit" @click="goToProductDetail(item)"></button>
        <figure>
          <img :src="item.product_main_image_url" mode="aspectFill">
        </figure>
      </form>
    </a>
  </div>
</template>

<script>
import formApi from '@/utils/api/form'

export default {
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    postFormId (e) {
      const data = {
        form_id: e.target.formId
      }
      formApi.postWXFormId(data)
    },
    goToProductDetail (item) {
      /*
      view = groupon 说明视角是要拼团
      view = normal 说明正常显示拼团和立即购买
      */
      wx.navigateTo({
        url: `/pages/product?id=${item.product_id}&view=normal`
      })
    }
  }
}
</script>