1、点击事件 @click=" selectCity()" selectCity()方法名写在methods里面
2、页面跳转 util.navigateTo("selectCity") util这里需要导包，import util from ‘../util‘ 括号里是跳转的页面。
3、轮播图 autoplay="true" 自动轮播
-
``<swiper class=‘swiper-block‘ autoplay="true" current=‘0‘ @change=‘swiperChange($event)‘>
<template v-for="(item,index) in imgUrls"> <swiper-item @click="gotoShopOrCom(item.object_type,item.object_id,item.object_pid,item.gid,item)" class="swiper-item" :key="item.object_id"> <image :src="item.object_picture" width="343" height="180"/> <!--//swiperCurrent == index ? "active slide-image" : "slide-image"--> </swiper-item> </template></swiper> ``
-
data中{swiperCurrent：0
-
}
-
方法中
{ swiperChange(e) { this.swiperCurrent = e.mp.detail.current }, 对应<div>中的@change事件 }
-
底部样式 swiperCurrent-这个是下标
<div class="dots"> <template v-for="(item,index) in imgUrls"> <div :class=‘[swiperCurrent == index ? "active dot" : "dot"]‘ :key="item.object_id"></div> </template> </div>样式
.dots { margin: 9px; display: flex; justify-content: center;
.dot {
margin: 2px;
width: 7px;
height: 7px;
border-radius: 8px;
border: 0.1px solid #A1A1A1;
transition: all 0.6s ease-in-out;
}
?
.dot.active {
width: 18px;
background: #A1A1A1;
}
}
-
轮播图中数字下标 在最外层<div>设置 v-if="showLength"
<span class="item-num" v-if="showLength>1">{{swiperCurrent+1}}/<span style="font-size: 10px">{{shopScrollPicture.length}}</span></span> <span class="item-num" v-else>1/<span style="font-size: 10px">{{shopScrollPicture.length}}</span></span> data() { return { shopScrollPicture: [],----这个是存放轮播图数据的数组 swiperCurrent: 0, -----下标 } },
计算属性 computed: { showLength() { return this.shopScrollPicture.length } },
-
上拉刷新 上拉监听事件-->调接口-->进行数组拼接
onReachBottom() { this.selectGoodsAppletList(this.Name) }---上拉监听事件 与methods中方法属于同级关系if (data.data_list.length && data.data_list !== {}) { if (data.data_list&& data.data_list.length) { //数组拼接 this.commodityData = this.commodityData.concat(data) this.Page_index += 1 } else { if (this.Page_context > 5) { wx.showToast({ title: "没有更多商品了~", icon: "none", }) this.Page_index = 1 } } }---这个写在相应的接口中 -
计算属性相关
computed与watch之间的区别：
1.computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
2.computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
1.watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象；
2.watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据；
计算属性：允许我们对指定的视图，复杂的值计算。这些值将绑定到依赖项值，只在需要时更新。
例子：查看所有学科的总数
- 计算属性的setter：计算属性默认只有getter，不过在需要时你也可以提供一个setter
-
//set用法：通过设置一个值来改变它相关联的值，而改变了它相关联的值之后，又会引起fullName值的重新计算，页面也就跟着变化了
//27行代码的用法：引入一个arr值，用于打散value中传来的参数，把它变成数组，分别赋值给firstName和lastName，间接的改变firstName和lastName的值。