使用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>
12345678910111213141516171819202122232425 // 监听滑块索引的改变
changeSwiper(e) {
this.swiperCurrent = e.detail.current
},
1234/* 指示点样式修改 */
.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;
}
12345678910111213141516171819202122232、修改botton边框
uniapp里面botton的边框是不能直接修改的，需要修改其after
示例
.card-button::after {
border: none;
}
1233、uni.navigateTo失效问题
如果要跳转的路由属于tabBar中，那么不能使用uni.navigateTo，需要使用uni.switchTab。
示例
uni.switchTab({
url: '../home/index'
})
1234、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>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758data() {
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
}
}
1234567891011121314151617181920212223245、input中value 属性设置不生效的问题
当重复设置某些属性为相同的值时，不会同步到view层。
解决方法可以参考：解决方法value 属性设置不生效
或者直接在得到焦点时清空，失去焦点时赋值
6、调用一些第三接口需要写在button中并定义 open-data
示例：getUserInfo
<button open-type="getUserInfo" class="rectangle" @click="getUserInfo">
17、ios底部使用绝对定位，上面使用margin-bottom相间隔会有回弹问题
解决办法使用padding-bottom
8、强制更新
有时候会遇到数据更新了，但是view视图部分没有更新的情况，这时候可以使用强制刷新。
this.$forceUpdate()