关于wepy框架开发小程序时使用vant weapp组件以及ios设备中遇到的独有问题及解决思路。

徐飞不会喝酒

已于 2022-05-06 15:34:07 修改

阅读量1.2k

点赞数

分类专栏：微信小程序文章标签：小程序前端

于 2022-05-06 15:32:41 首次发布

本文链接：https://blog.csdn.net/weixin_61243175/article/details/124611477

版权

微信小程序专栏收录该内容

13 篇文章 0 订阅

订阅专栏

关于vant weapp 中tab组件使用固定定位时候的切换异常问题，如图只有刚进页面时切换第一次时时正常后面无论怎么切换都是异常

解决办法：

<van-tabs active="{{ active }}" >
复制代码

获取当前tab组件的索引，使用三元表达式按需显示，当不是当前索引的时候隐藏当前view就可以了，是不是非常简单

<view class="{{active===1?'tabbar':'isActive'}}" @tap='goApp'>向亲友申请共享</view>
复制代码

定义一个样式

.isActive{
    display: none;
}
复制代码

ios 设备使用 picker 后年份显示异常的问题

我的解决办法：

1.将 picker 标签中的 value 删除

<picker mode="date" bindchange="bindDateChange" fields="year">  去掉value可以解决ios年份显示的问题，或者加一个date_1
复制代码

2.新增一个date_1把他转化成字符串格式

<picker mode="date" value="{{date_1}}" bindchange="bindDateChange" fields="year"> 
复制代码

在data中新增一个date_1

date_1: dayjs().format('YYYY') + ""
复制代码

这里非常神奇的是在我解决好这个bug以后，我尝试把上面的方法全部删掉，想试试有没有别的方法。令人意外的是删除以后没有做任何操作在真机调试的时候居然奇迹般的又可以了！真是万万没想到。

输入验证码时键盘遮挡问题

一行代码足矣，给input一个 cursor-spacing ，具体大小根据需求选择，详见developers.weixin.qq.com/miniprogram…

<input cursor-spacing="50" />
复制代码

优惠券快过期时的提醒功能，显示倒计时的问题。

解决办法：

首先要确保你使用的是 day.js 。这个可以参考day.js官网dayjs.fenxianglu.cn/

 <view class="pro_date" wx:if='{{item.timeType==0}}'> 长期有效 </view>
                            <view class="pro_date_time"  wx:elif="{{item.Days <= 15}}">    <text>距失效仅剩{{item.Days}}天 </text></view>
                            <view class="pro_date_time"  wx:elif="{{item.Hors}}">    <text>距失效仅剩{{item.Hors}}小时 </text></view>
                            <view class="pro_date_time"  wx:elif="{{item.DownHors}}">    <text>距失效不足{{item.DownHors}}小时 </text></view>
                            <view class="pro_date"  wx:else>    <text>{{item.sdate}} </text> - <text>{{item.edate}} </text></view>
复制代码

arr.map(item => {
      item.moreFlag = false;
      item.sdate = item.sdate ? dayjs(item.sdate).format("YYYY/MM/DD") : "";
      item.edate = item.edate ? dayjs(item.edate).format("YYYY/MM/DD") : "";
      let start =  new Date() ? dayjs(new Date()).format("YYYY/MM/DD HH:mm") : "";// 当前最新的时间
      let end =  item.edate ? dayjs(item.edate).format("YYYY/MM/DD HH:mm") : "" // 到期时间
      let start_num = new Date(start.replace(/-/g,"/"))
      let end_num = new Date(end.replace(/-/g,"/"))
      let Days = parseInt((end_num.getTime() - start_num.getTime()) / (1000*60*60))
      // let Days = parseInt((end_num.getTime() - start_num.getTime()) / (1000*60*60*24))
      if(Days > 24){
        Days = Days / 24
        item.Days = Days.toFixed(0) //算出来的时间非常精准 去掉小数点
      }else if(Days <= 24 && Days >1){
        item.Hors = Days.toFixed(0) 
      }else{
        Days = Days + 1 // 小于1小时后不足多少小时所以需要 +1
        item.DownHors = Days.toFixed(0)
      }
    });

没错，这篇文章掘金的作者也是我。