使用uniapp开发小程序遇到的一些问题

1、swiper组件自定义指识点

swiper组件的指示点默认是圆圈，想要自己设置指示点，需要获得当前索引，然后赋给当前索引不同的样式，然后在做个动画就可以了。
*关键点
用change方法，然后通过e.detail.current获得索引
***示例

  
    <view class="swiper">
      <swiper
        class="swiper"
        :autoplay="true"
        :interval="3000"
        :duration="500"
        @change="changeSwiper"
      >
        <swiper-item v-for="item in banner" :key="item.cover_display">
          <view class="swiper-image">
            <image :src="item.cover_display" />
          view>
        swiper-item>
      swiper>
      
      <view class="dots">
        <view v-for="(item, index) in banner.length" :key="index">
          <view
            class="dot"
            :class="index === swiperCurrent ? ' active' : ''"
          />
        view>
      view>
    view>

 // 监听滑块索引的改变
    changeSwiper(e) {
     
      this.swiperCurrent = e.detail.current
    },

/* 指示点样式修改 */
.dots {
     
  position: absolute;
  width: 100%;
  height: 8rpx;
  bottom: 36rpx;
  z-index: 199;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.dot {
     
  width: 20rpx;
  height: 8rpx;
  transition: all 0.5s;
  background-color: #ffffff;
  margin-right: 10rpx;
}
.active {
     
  width: 40rpx;
  height: 8rpx;
  background-color: #306de9;
}

2、修改botton边框

uniapp里面botton的边框是不能直接修改的，需要修改其after
示例

.card-button::after {
     
  border: none;
}

3、uni.navigateTo失效问题

如果要跳转的路由属于tabBar中，那么不能使用uni.navigateTo，需要使用uni.switchTab。
示例

uni.switchTab({
     
     url: '../home/index'
})

4、input数据双向绑定问题

在小程序中input组件中的数据不会实时反应，需要开发手动赋值更新
示例

   
        <view class="edit-traveler-input-box">
          <text>{
    { language === "EN" ? "姓名" : "First Name" }}text>
          <input
            :placeholder="
              language === 'EN' ? '在此输入姓名' : '在此输入名字，例如jia jia'
            "
            :value="setData.first_name"
            data-model="first_name"
            type="value"
            placeholder-class="placeholder"
            @blur="changeInput"
          >
          <view
            :class="language === 'EN' ? 'EN-class' : 'CN-class'"
            @click="changeLanguage"
          >{
    { language }}view>
          <image src="@/static/image/default/contacts/contacts.png" />
        view>
        <view v-if="language === 'CN'" class="edit-traveler-input-box">
          <text>Last Nametext>
          <input
            placeholder="在此输入姓氏，例如Guo"
            placeholder-class="placeholder"
            :value="setData.last_name"
            data-model="last_name"
            type="value"
            @blur="changeInput"
          >
        view>
        <view class="edit-traveler-input-box">
          <text>联系方式text>
          <input
            placeholder="在此输入联系方式"
            placeholder-class="placeholder"
            :value="setData.telephone"
            data-model="telephone"
            type="value"
            @blur="changeInput"
          >
        view>
        <view class="edit-traveler-input-box">
          <text>{
    { myMap[id_type] }} text>
          <input
            :placeholder="
              id_type === 'GovernmentId' ? '在此输入身份证' : '在此输入护照'
            "
            placeholder-class="placeholder"
            :value="setData.id_no"
            data-model="id_no"
            type="value"
            @blur="changeInput"
          >
          <image
            src="@/static/image/default/contacts/transformation.png"
            @click="changeID"
          />
        view>

data() {
     
    return {
     
      hideModal: false, // 模态框的状态  true-隐藏  false-显示
      animationData: {
     }, //
      val: 0,
      language: 'EN',
      id_type: 'GovernmentId',
      myMap: this.$myMap,
      uid: null,
      setData: {
     
        id_no: '',
        telephone: '',
        first_name: '',
        last_name: ''
      }
    }
  },
methods: {
     
  // 同步input
    changeInput(e) {
     
      const item = e.currentTarget.dataset.model
      this.setData[item] = e.detail.value
    }
}

5、input中value 属性设置不生效的问题

当重复设置某些属性为相同的值时，不会同步到view层。
解决方法可以参考：解决方法value 属性设置不生效
或者直接在得到焦点时清空，失去焦点时赋值

6、调用一些第三接口需要写在button中并定义 open-data

示例：getUserInfo

7、ios底部使用绝对定位，上面使用margin-bottom相间隔会有回弹问题

解决办法使用padding-bottom

8、强制更新

有时候会遇到数据更新了，但是view视图部分没有更新的情况，这时候可以使用强制刷新。

this.$forceUpdate()