一.拨打电话---------- uni.makePhoneCall
代码:
<view class="" @click="phone">
联系电话: 1111111111111
</view> phone() {
uni.makePhoneCall({
phoneNumber: '111111' //拨打电话
})
}二.下拉加载更多------onReachBottom
代码：
<template>
<view class="goods_list">
<goodList @goodsItemClicjk='goD' :goods='goods' />
<view class="isOver" style="text-align: center;" v-if="flag">
-----我是有底线的
</view>
</view>
</template>
<script>
import goodList from "../../components/goods_list.vue"
export default {
data() {
return {
pageindex: 1,
goods: [],
flag: false
}
},
components: {
goodList
},
onLoad() {
this.getGoodList()
},
methods: {
async getGoodList(callback) {
const res = await this.$myRequest({
url: '/api/getgoods?pageindex=' + this.pageindex
})
console.log(res)
this.goods = [...this.goods, ...res.data.message]
callback && callback()
}
},
// 下拉下载更多
onReachBottom() {
// 通过和总的数据进行比较
if (this.goods.length < this.pageindex * 10) return this.flag = true
// 获取第二页数据
this.pageindex++
this.getGoodList()
},
onPullDownRefresh() {
// 下拉刷新
this.pageindex = 1 //
this.goods = []
this.flag = false //
// this.getGoodList()
setTimeout(() => {
this.getGoodList(() => {
uni.stopPullDownRefresh()
})
}, 1000)
}
}
</script>
<style lang="scss">
.goods_list {
background: #eee;
}
</style>
代码分析：
(1)在pages.json里面开启 "enablePullDownRefresh": true。
(2):通过v-if来控制-----我是有底线的显示和影藏
代码：
上方可以看到。
触发的时间:
// 下拉下载更多
onReachBottom() {
// 通过和总的数据进行比较
if (this.goods.length < this.pageindex * 10) return this.flag = true
// 获取第二页数据
this.pageindex++
this.getGoodList()
},每次触底都会加载下一页的数据。
怎么判断数据没有了呢？
通常情况接口会返回一个total给你,
当然我这个页面没返回
this.goods.length //渲染的总数据
total //总的数据
如果两者相等如果数据已经全部请求过来了。
找个时候是应该站出来表明自己的观点。
将flag的值变为true。
(3)默认请求第一页的数据,页数数据合并的处理
onLoad() {
this.getGoodList()
},
methods: {
async getGoodList(callback) {
const res = await this.$myRequest({
url: '/api/getgoods?pageindex=' + this.pageindex
})
console.log(res)
this.goods = [...this.goods, ...res.data.message]
callback && callback()
}
},代码分析:
goods: [] //是要循环的数据
this.goods = [...this.goods, ...res.data.message]。
这段代码换种写法:
this.goods = res.data.message这可以理解将下请求过来的数据直接赋值第一个页的数据。
当触底的时候:
代码：
onReachBottom() {
// 获取第二页数据
this.pageindex++
this.getGoodList()
},此时 this.pageindex++的值变为2,获取第二页的数据。
第一页的数据:
第二页的数据:
此时只会显示5条
得到的结果是重新覆盖了。
我们想要的肯定是第一页第二页都要。
解决方法:
this.goods = [...this.goods, ...res.data.message]三.下拉刷新------------onPullDownRefresh
代码:
onPullDownRefresh() {
// 下拉刷新
this.pageindex = 1 //
this.goods = []
this.flag = false //
// this.getGoodList()
setTimeout(() => {
this.getGoodList(() => {
uni.stopPullDownRefresh()
})
}, 1000)
}1.回到第一页
2.将渲染的数据置空
3.关闭我是有底线
4.uni.stopPullDownRefresh()
关闭下拉的时候的转圈。
四.二级联动
代码：
<template>
<view class="pics">
<!-- n能够滚动的区域 -->
<!-- n能够滚动的区域 -->
<!-- scroll-y="true" 纵向滚动 -->
<scroll-view scroll-y="true" class="left">
<view :class="active===index?'active':'' " v-for="(item,index) in cates" :key='item.id'
@click="leftClick(index,item.id)">{
{item.title}}</view>
</scroll-view>
<scroll-view scroll-y="true" class="right">
<view class="item" v-for="item in secondData" :key='item.id'>
<image @click="previeImg(item.img_url)" :src="item.img_url" mode=""></image>
<text>{
{item.title}}</text>
</view>
<!-- //暂无数据的处理 -->
<text v-if="secondData.length===0">暂无数据</text>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
cates: [],
active: 0,
secondData: []
}
},
onLoad() {
this.getPicsState()
},
methods: {
// 图片的预览
previeImg(current){
const urls=this.secondData.map(item=>{
return item.img_url //返回每一项的地址
})
uni.previewImage({
current,
urls
})
},
async leftClick(index, id) {
this.active = index
const res = await this.$myRequest({
url: '/api/getimages/' + id //接口地址
})
this.secondData = res.data.message
},
async getPicsState() {
const res = await this.$myRequest({
url: '/api/getimgcategory'
})
this.cates = res.data.message
this.leftClick(0,this.cates[0].id) //根据一级分类的id直接获取二级分类
}
}
}
</script>
<style lang="scss">
page {
height: 100%;
.pics{
height: 100%;
display: flex;
.left {
width: 200rpx;
height: 100vh;
border-right: 1px solid #eee;
view {
height: 66px;
line-height: 60px;
color: #333;
text-align: center;
font-size: 30rpx;
border-top: 1px solid #eee;
}
.active {
background: #b50e03;
color: #fff;
}
}
.right{
height: 100%;
width: 520rpx;
margin: 10rpx auto;
.item{
image{
width: 520rpx;
height: 520rpx;
border-radius: 5px;
}
text{
font-size: 30rpx;
line-height: 60rpx;
}
}
}
}
}
</style>
通过一级的每一项id,从而请求二级联动是数据。
代码：
async leftClick(index, id) {
this.active = index
const res = await this.$myRequest({
url: '/api/getimages/' + id //接口地址
})
this.secondData = res.data.message
},通过索引来控制显示当前项:
代码:
<view :class="active===index?'active':'' " v-for="(item,index) in cates" :key='item.id'
@click="leftClick(index,item.id)">{
{item.title}}</view>默认显示第一页的数据:
this.leftClick(0,this.cates[0].id) //根据一级分类的id直接获取二级分类分析当前页的布局：
scroll-view 可以看做一个div的盒子
高度默认是撑满这个屏幕的。
item是里面的每一项。
五.关于轮播图
<swiper :indicator-dots="true" :autoplay="true" circular="true" :interval="3000" :duration="1000">
<swiper-item v-for="item in swipers" :key="item.id">
<image :src="item.img" mode="" ></image>
</swiper-item>
</swiper>
样式：
swiper{
width: 750rpx;
height: 380rpx;
image{
width: 100%;
height: 100%;
}给外层的swiper加上宽高图片默认给上100%即可。
属性：
:indicator-dots="true" :autoplay="true" circular="true" :interval="3000"
是否需要点 自动播放 循环播放 时间间隔