05 小程序 video 搜索栏

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