触屏事件
@touchstart手指按下
@touchend手指离开
手指在屏幕上的坐标event.changeTouches[0].clientX和clientY
滑动是改变索引，所以明白之前为什么要取列表数组＋索引，而不是直接去item来，是为了改变索引，增加减少来形成滑动改变图片
<image>是block
下载图片
//点击下载图片
async handleDownload(){
// uni.downloadFile
// uni.saveImageToPhotosAlbum
await uni.showLoading({
title: '下载中'
})
// 1.将远程文件下载到小程序的内存中 tempFilePath
const result1 = await uni.downloadFile({
url: this.imgDetail.img})
const {
tempFilePath} = result1[1]
// 2.将小程序中的临时文件下载到本地上
const result2 = await uni.saveImageToPhotosAlbum({
filePath:tempFilePath
})
uni.hideLoading()
// 3.提示用户下载成功
await uni.showToast({
title:'下载成功'
})
console.log('下载成功')
}
}
有意思的小bug
要是想用flex布局，而且还用了scorll-view这个标签，那么就要给这个标签写上enable-flex这个属性才会生效哦
scroll-view enable-flex class="category_tab_content" scroll-y>
<view class="cate_item" v-for="item in vertical" :key="item.id">
<image :src="item.thumb" mode="widthFix"></image>
</view>
</scroll-view>
.category_tab_content{
height: calc(100vh - 36px);
display: flex;
flex-wrap: wrap;
.cate_item{
width: 33.33%;
border: 2rpx solid #ffffff;
image{
}
}
}
视频模块
这部分css是背景图，记得昨天不会写，而且里面有c3滤镜模糊，挺好玩的，记录一下。
.video_play{
position: relative;
image{
position: absolute;
width: 100vw;
height: 100vh;
z-index: -1;
//css3中滤镜属性
filter: blur(10px);
}
视频
objectFit=“fill”表示撑满video容器，具体可以去uniapp video这看看
<view class="video_wrap">
<video :src="videoObj.video" objectFit="fill">
</video>
</view>
muted是否静音，也是video的属性，他这利用数组乐行的class，以前我用的是再加一个class，都一样
<view @click="handleMusic" :class="['iconfont', muted? 'iconjingyin':'iconshengyin']"></view>
<view class="iconfont iconzhuanfa">
<button open-type="share"></button>
</view>
转发，这里是把图标盖住了，设置为透明，既看不见又保留了图标
<button open-type="share">转发</button>
.iconzhuanfa{
position: relative;
button{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
}
下载图片
这里注意括号，因为取到的tempFilePath是一个数组，要将await也看成整体才可以哦
呜呜呜┭┮﹏┭┮，结束了，终于写完了，呜呜┭┮﹏┭┮ ┭┮﹏┭┮┭ ┮﹏┭┮ 下课了！ 这个项目总体来说还是简单的，有vue和为和微信小程序基础，很容上手，好了好了，这个项目虽然完结，但是我们的路程还没有停止，从19年10月份，至今，已经6个月了，不知不觉已经自学了这么久，也坚持了下来，从一开始的写h5觉得很有意思，到现在好奇如何搭建服务器，怎样存取数据，越来越觉得这条路还有很多没有学的，哪怕前端这么多知识，都没有接触到，感叹自己的渺小，快毕业的我希望可以找一个满意的工作，多接触实际项目，路途艰辛遥远，但是从来不会放弃，明天我们继续学习，奥利给！
最后附上这个uni-app自己纯手打的源码，跟着b站黑马家的2020用vue开发小程序写的，有兴趣可以去看看，找不到私聊我哦，哈哈，加油！
在这链接源码 他这个项目名字是：懂你找图 提取码：m292