使用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 Name</text>
          <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

 <button open-type="getUserInfo" class="rectangle" @click="getUserInfo">

7、ios底部使用絕對定位，上面使用margin-bottom相間隔會有回彈問題

解決辦法使用padding-bottom

8、強制更新

有時候會遇到資料更新了，但是view視圖部分沒有更新的情況，這時候可以使用強制重繪，

this.$forceUpdate()