video(视频组件)
wxml
<view class="section video">
<video duration="60" autoplay="true" objectFit="cover" show-mute-btn="true"
src="E:BaiduNetdiskDownload示例.mp4"></video>
</view>
-
duration:播放时长
-
autplay:是否自动播放
-
objectFit="cover" 覆盖,不会有黑边。
搜索栏
js
Page({
/**
* 页面的初始数据
*/
data: {
containershow:true,
searchxx:false,
},
// 输入框
onbindfocus:function(event){
var value = event.detail.value
console.log(value);
this.setData({
containershow:false,
searchxx:true
})
},
onbingtop:function(){
this.setData({
containershow:true,
searchxx:false,
})
},
wxml
<!-- 输入框 -->
<view class="search">
<icon type="search" class="searchimg" size="20" color="#405f80"></icon>
<input type="text" placeholder="请输入一个身份和姓名" bindfocus="onbindfocus"></input>
<icon type="clear" size="20" class="xximg" wx:if = "{{searchxx}}" bindtap="onbingtop"></icon>
</view>
<!-- 隐藏下文 -->
<view wx:if = "{{ containershow }}">
下面的文章下面的文章下面的文章下面的文章
</view>
wxss
.search{
background-color: #f2f2f2;
height: 80rpx;
100%;
display: flex;
flex-direction: row;
}
.searchimg{
margin:auto 0 auto 20rpx ;
}
.search input{
height: 100%;
600rpx;
margin-left: 10px;
font-size: 28rpx;
}
.xximg{
height: 45rpx;
45rpx;
margin: auto 20rpx auto 10rpx;
}.search{
background-color: #f2f2f2;
height: 80rpx;
100%;
display: flex;
flex-direction: row;
}
.searchimg{
margin:auto 0 auto 20rpx ;
}
.search input{
height: 100%;
600rpx;
margin-left: 10px;
font-size: 28rpx;
}
.xximg{
height: 45rpx;
45rpx;
margin: auto 20rpx auto 10rpx;
}
语法通道: https://www.cnblogs.com/ynzj123/p/12725410.html