Touch screen event
@touchstart finger press
@touchend finger to leave
The coordinates of the finger on the screen event.changeTouches[0]. clientX and clientY
sliding is to change the index, so I understand why the list array + index was taken before, instead of going directly to the item, it is for Change the index, increase or decrease to form a sliding change picture
<image>是block
Download pictures
//点击下载图片
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('下载成功')
}
}
Interesting little bug
If you want to use flex layout, and also use the tag of scorll-view, then write the attribute enable-flex to this tag to take effect.
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{
}
}
}
Video module
This part of the css is the background image. I remember that I would not write it yesterday, and there is a c3 filter blur inside, which is very fun, record it.
.video_play{
position: relative;
image{
position: absolute;
width: 100vw;
height: 100vh;
z-index: -1;
//css3中滤镜属性
filter: blur(10px);
}
Video
objectFit="fill" means that the video container is filled up, you can go to uniapp video for details
<view class="video_wrap">
<video :src="videoObj.video" objectFit="fill">
</video>
</view>
Whether muted is muted or not is also the attribute of video. It uses the class of the array Lexing. I used to add another class, which is the same.
<view @click="handleMusic" :class="['iconfont', muted? 'iconjingyin':'iconshengyin']"></view>
<view class="iconfont iconzhuanfa">
<button open-type="share"></button>
</view>
Forward, here is to cover the icon, set to transparent, both invisible and retain the icon
<button open-type="share">转发</button>
.iconzhuanfa{
position: relative;
button{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
}
Download the picture
Pay attention to the brackets here, because the tempFilePath fetched is an array, so await should also be regarded as a whole.
Ooh ┭┮﹏┭┮, it’s over, and finally finished, oh ┭┮﹏┭┮ ┭┮﹏┭┮┭ ┮﹏┭┮ get out of class is over! This project is generally simple, with Vue and Wei and WeChat applets. It is easy to get started. Okay. Although this project is over, our journey has not stopped. Since October 19, it has been It’s been 6 months. I have been self-study for so long before I know it, and I have persisted. From the beginning, I found it very interesting to write h5. Now I am curious about how to build a server and how to access data. I feel more and more that this road is still A lot of people who have not learned, even with so much front-end knowledge, have not been exposed to it, lamenting my insignificance, I am about to graduate, I hope I can find a satisfactory job, get more exposure to actual projects, the journey is hard and long, but I never give up, tomorrow we Keep learning, Ollie give it!
Finally, attach the source code of this uni-app by its own hands, and follow the vue development applet written by the dark horse's 2020 at station b. If you are interested, you can check it out. I can't find a private chat with me, haha, come on!
In the link to the source code, the name of his project is: Understand how you find the picture extraction code: m292