uni-app（5）

最新推荐文章于 2024-05-21 09:41:01 发布

写bug的小气球

最新推荐文章于 2024-05-21 09:41:01 发布

阅读量267

点赞数 1

分类专栏：自学前端微信小程序 Vue 文章标签：小程序 vue

本文链接：https://blog.csdn.net/weixin_46013619/article/details/105066652

版权

自学前端同时被 3 个专栏收录

42 篇文章 1 订阅

订阅专栏

Vue

30 篇文章 0 订阅

订阅专栏

微信小程序

10 篇文章 0 订阅

订阅专栏

触屏事件

@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;
                }
            }