领先的免费Web技术教程,涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

使用uniapp开发小程序遇到的一些问题及解决方法

nixiaole 2025-02-13 13:37:11 知识剖析 19 ℃

1、swiper组件自定义知识点

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

***示例

  
    
      
        
          
            
          
        
      
      
      
        
          
        
      
    
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;
}
1234567891011121314151617181920212223

2、修改botton边框

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

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

3、uni.navigateTo失效问题

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

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

4、input数据双向绑定问题

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

   
        
          {{ language === "EN" ? "姓名" : "First Name" }}
          
          {{ language }}
          
        
        
          Last Name
          
        
        
          联系方式
          
        
        
          {{ myMap[id_type] }} 
          
          
        
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
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
    }
}
123456789101112131415161718192021222324

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

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

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

示例:getUserInfo

 

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

解决办法使用padding-bottom

8、强制更新

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

this.$forceUpdate()
最近发表
标签列表