小程序 之仿抖音界面

一、效果图

小程序 之仿抖音界面

 

 二、代码

<cu-custom bgColor="background:none;" isBack="{{false}}">
    <view slot="backText"></view>
    <view slot="content"></view>
    <view slot="right">
        <view class="cu-bar">
            <view class="action">
                <text class="cuIcon-homefill" bindtap="goIndex" style="color:#fff;"></text>
            </view>
        </view>
    </view>
</cu-custom>
<view class="video_box">
    <view bindtouchend="touchEnd" id="myVideo{{index}}" animation="{{animation}}" bindtouchstart="touchStart" bindtouchmove="touchMove" class="video_list" wx:for="{{video_list}}" data-index="{{index}}" wx:key="index">
        <video bindtimeupdate="loadedData" bindloadedmetadata="bindloadedmetadata" id="index{{index}}" muted="{{vioce}}" controls="{{false}}" autoplay="{{index==current_index?true:false}}" custom-cache="{{false}}" src="{{item.video_url}}" vslide-gesture-in-fullscreen="{{false}}" direction=‘{{0}}‘ enable-progress-gesture="{{false}}" loop="{{true}}" show-fullscreen-btn="{{false}}" object-fit="contain"></video>
        <view class="text-box">
            <view class="text-box-info padding">
                <view class="info-btn-box font-size16" bindtap="goTo" data-index="{{index}}">
                    <text class="cuIcon-cart" style="font-size: 20px;" decode="true">&nbsp;</text>
                    <view style="display: inline-block;">查看详情</view>
                </view>
                <view class="info-price-box font-size16">{{item.price}}</view>
                <view class="info-title-box">{{item.title}}</view>
            </view>
            <view class="company-logo" bindtap="goHome">
                <image src="{{item.thumb}}" style="width:100%;height:100%"></image>
            </view>
            <button open-type="share" class="cuIcon-forwardfill share-btn"></button>
            <view bindtap="setVioce" class="{{vioce==false?‘cuIcon-notification‘:‘cuIcon-notificationforbidfill‘}} font-size15 set-vioce"></view>
        </view>
    </view>
</view>

<view class=‘load-progress {{loadProgress!=0?"show":"hide"}}‘ style="bottom:0px;top: inherit;">
    <view class=‘load-progress-bar bg-green‘ style="transform: translate3d(-{{100-loadProgress}}%, 0px, 0px);"></view>
    <view class=‘load-progress-spinner text-green‘></view>
</view>
.video_box {
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  bottom: 0rpx;
  background-color: #000;
  z-index: 2;
}

.video_list {
  width: 100%;
  height: 100vh;
  position: relative;
}

.video_list video {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
}

.text-box{
  width: 100%;
  height: auto;
  background-color: rgba(0, 0, 0, 0);
  /* background-color: rgba(0, 0, 0, 0.6); */
  position: absolute;
  left: 0;
  bottom: 20rpx;
  z-index: auto;
  color: #f5f5f5;
}

.text-box-info{
  width: 100%;
  flex-direction: column;
}
.text-box-info .info-btn-box{
  /* display: flex; */
  border-radius: 40rpx;
  background-color: rgba(0, 0, 0, .5);
  padding: 15rpx 30rpx;
  text-align: center;
  display: inline-block;
}
.text-box-info .info-price-box{
  line-height: 70rpx;
}
.text-box-info .info-title-box{
  font-size: 26rpx;
}

.icon-box{
  height: auto;
  /* background-color: rgba(0, 0, 0, 0); */
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  right: 30rpx;
  bottom: 20rpx;
  z-index: auto;
  color: #f5f5f5;
  text-align: right;
  display: flex;
  flex-direction: column;
  z-index: 1;
  font-size: 20px;
}

.icon-box view{
  /* line-height: 60rpx; */
}
.set-vioce{
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(255, 255, 255, .12);
  border-radius: 50%;
  text-align: center;
  line-height: 40rpx;
  position: absolute;
  right: 50rpx;
  bottom: 25rpx;
}
.share-btn{
  width: 60rpx !important;
  height: 60rpx;
  position: absolute;
  right: 40rpx;
  bottom: 180rpx;
  font-size: 50rpx;
  text-align: center;
  background-color: inherit !important;
  margin: 0;
  padding: 0;
  color: #f5f5f5;
}
.company-logo{
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  right: 20rpx;
  bottom: 320rpx;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
}

 

小程序 之仿抖音界面

上一篇:微信小程序滴滴中银行卡管理模块左滑出现删除和编辑的代码实现


下一篇:小程序使用字体