最近用用一个开源的项目做了一个微信小程序商城,但是开源的项目功能确实有点不尽人意,很多都要自己来设置,所以在很多想要的功能也只能自己来添加。

今天来分享一个给商品添加视频的小功能,我这个用到的只是一个显示隐藏的功能,但是也能基本满足我的需求了。

直接上代码:

WXML

<view class='up' bindtap='showRule' wx:if="{{storeInfo.store_insp}}">//根据是否有视频地址判断显示隐藏
<image src='../../images/video-play.png'></image>//播放图片
</view>
<view class="float {{isRuleTrue?'isRuleShow':'isRuleHide'}}">
<viewclass='floatContent'>
<video bindtap='videoPlay' src="{{storeInfo.store_insp}}" ></video>//视频地址这里是一个变量
<imagesrc='../../images/icon-close.png' class='ruleHide'bindtap='hideRule'>X</image>//关闭图片
</view>
</view>
JS
//商城详情视频播放组件
//打开透明层
showRule: function () {
this.setData({
isRuleTrue: true
})
},
//关闭透明层
hideRule: function () {
this.setData({
isRuleTrue: false
})
},
WXSS
.up {
display:block;
width:150rpx;
height:150rpx;
position:absolute;
top:275rpx;
left:300rpx;
}
.up image{
width:150rpx;
height:150rpx;
}
.isRuleShow {
display:block;
}
.isRuleHide {
display:none;
}
.float {
height:100%;
width:100%;
position:fixed;
background-color:rgba(0, 0, 0, 0.5);
z-index:2;
top:0;
left:0;
}
.floatContent {
padding:20rpx0;
width:100%;
height:100%;
background:#696969;
margin:0;
border-radius:20rpx;
display:flex;
flex-direction:column;
justify-content:space-around;
align-items:center;
position:relative;
}
.floatContent video{
width:100%;
}
.ruleHide {
height:60rpx!important;
width:60rpx!important;
position:absolute;
top:9rpx;
right:9rpx;
}
应该怎么用我就不多说了,应为我用了变量函数,所以需要根据自己的实际情况调整我提供相关思路,这些也是在网上看其他大神修改的,确实够我用,具体效果可以看我的小程序演示

声明:浩孜网络|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 给微信小程序商城产品添加视频功能

查看评论

Comments | NOTHING

暂无评论
Welcome back , [ 修改 ]