记录使用 Vant 过程中遇到的一些技术点

移动端调试：vue 使用 vsconsole 手机端控制台
JSON在线解析及格式化验证：https://www.json.cn/

1、列表懒加载：
参考：https://www.cnblogs.com/willsoo/p/14784129.html

<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  :immediate-check="false"
>
  <div
    v-for="(item, index) in list"
    :key="index"
    class="item_"
    @click="toDetail(item)"
  >
    <span>列表数据</span>
  </div>
</van-list>

data() {
  return {   
    list: [],
    total: 0, //记录全部的数据
    loading: false,
    finished: false,
    current: 1, //记录第几页 
  };
},
methods:{
  // 触底加载
	onLoad() {
	  if (this.list.length === this.total) {
	    this.loading = false;
	    this.finished = true;
	    return;
	  }
	  this.current++;
	  this.getTaskList();
	},
	getTaskList(){}
}
created() {
  this.getTaskList(); // 在页面一加载就先请求一次接口
},

遇到的问题：项目里，加载的list，页面上有个切换的tab, 实现切换不同的类型，加载不同的 list 的功能。vant-ui 的 list 就有个bug，当切换 tab 的时候，它的 onload 没方法自动触发。然而在当前标签页，如果列表已经加载完毕再去切换，onload 就可以实现自动触发。

切换后 onload 不触发
解决办法：

methods:{
  confirm(type) {
    this.list = [];
    this.current = 1; 
    this.loading = true;
    this.finished = false;
    this.getTaskList();
  },
}

2、vant-picker 级联选择初始设置默认值
参考：https://blog.csdn.net/mengyu522/article/details/119911463

:default-index="defaultIndex"

3、picker 组件滑动没结束，直接关闭弹框，再次显示弹框后当前选中的值不正确
bug展示：

bug问题复现：picker多列选择器点击取消重新打开选择器的时候默认的不是确认时候的值

解决方法：
参考：van-picker组件default-index属性设置不生效踩坑

<van-popup v-model="month.show" position="bottom" get-container="body">
      <van-picker
        title="选择月份"
        show-toolbar
        :columns="month.columns"
        @confirm="handleMonth"
        @cancel="cancelMonth"
        :default-index="defaultMonth"
        ref="monthRef"
      />
</van-popup>

data(){
	return{
		defaultMonth: 0, //默认选择月份的序号
		month: {
			show: false,
			columns: [
	          "1月",
	          "2月",
	          "3月",
	          "4月",
	          "5月",
	          "6月",
	          "7月",
	          "8月",
	          "9月",
	          "10月",
	          "11月",
	          "12月",
	        ],
		}
	}
},
methods{
	handleMonth(val) {
	      this.month.show = false;
	      this.month.columns.forEach((item, index) => {
	        if (item === val) {
	          this.defaultMonth = index;
	        }
	      });
	},
	cancelMonth(val) {
	      this.month.show = false;
	      this.$nextTick(() => {
	        this.$refs.monthRef.setIndexes([this.defaultMonth]); // 注意这里是数组[索引值]
	      });
	    },
	}

备注：van-popup() 点击空白处关闭弹窗

点击空白处不关闭弹窗

<van-popup v-model="month.show" position="bottom" :close-on-click-overlay="false" get-container="body">
      <van-picker
        title="选择月份"
        show-toolbar
        :columns="month.columns"
        @confirm="handleMonth"
        @cancel="(val1, val2, val3) => cancelPopup('month', 'monthRef', 1)"
        :default-index="default_1"
        ref="monthRef"
      />
    </van-popup>

4、scss文件中使用深度选择器/deep/报错 Expected selector
参考：https://blog.csdn.net/lfl976/article/details/104894147

vue官网上关于深度选择器提到：
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

于是用 ::v-deep 就可以了

5、h5 页面 唤起手机拨号功能

<!-- 在head 里面添加meta标签 -->
<meta name="format-detection"  content="telephone=yes">  

（1）在H5页面中调起手机的电话拨打功能其实很简单就能实现：

<a href="tel:13556891235">点击给我打电话</a>

（2）在H5页面中调起手机发送短信：

<a href="sms:18688888888">发短信</a>

（3）要想实现点击一个按钮我们可以通过点击一个按钮然后弹出一个对话框，询问是否要拨打电话，并在页面上提示电话号码，然后我们点击确定，我们可以通过直接将a标签的内容写为确定，当用户点击确定的时候就会自动调起打电话功能。

<a href="tel:13556891235">确定</a>