微信小程序列表播放视频播放当前视频上一个暂停

мо仙堡杠把子ご灬

已于 2023-04-07 09:14:16 修改

阅读量1.7k

点赞数

分类专栏：微信文章标签：做一个有知识的流氓

于 2019-10-26 15:11:12 首次发布

本文链接：https://blog.csdn.net/weixin_43553701/article/details/102756620

版权

微信专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一身正气，浪荡自由。

在这里插入图片描述

<!--pages/classification/classification.wxml-->
<!-- <text>pages/classification/classification.wxml</text> -->

<!-- 引入.wxs文件 src为相对路径，module指定当前模块的名称 -->
<wxs module="filter" src="../../utils/returnMTime.wxs"></wxs>


<view class='classification' style="z-index: 10000">
    <search class="search"></search>
    <view class='tab-wrapper'>
        <view id="{{item.id}}" data-index="{{index}}" wx:for="{{tabListL}}" wx:key="item" wx:if="{{index <= 3}}" class='tab {{currentTab === index ? "tab-active":""}}' bindtap='switchTab'>
            {{item.name}}
            <text class="bobr"></text>
        </view>
        <image bindtap="downLoadMore" class="loadMore bar" src="/static/img/downBoxBtn@2x.png"></image>
    </view>
</view>

<view  style="padding-top: {{paddingTop}}px;" class="containerr">
    <scroll-view class='nav-page'>
        <view class="item-box freeVideoBox" wx:for="{{videoList}}" wx:key="item">
            <!-- 视频图片层 -->
            <view data-id="{{index}}" class="video-image-box freeVideoPanel " style="display: {{ _index == index ? 'none' : 'block' }};" bindtap="videoPlay">
                <image class="topbgblack" src="/static/img/topbgblack@2x.png"></image>
                <view class="videoTitle">{{ item.video.title }}</view>
                <!-- <view class="videoTeacher">讲师：{{ filter.filter.saveData(item.video.lecturerInfo,1) }} · {{filter.filter.saveData(item.video.lecturerInfo,0) }}</view> -->
                <view class="video-cover-box">
                    <image class="video-image" src="{{item.video.cover}}" mode="aspectFit"></image>
                </view>
                <!-- 视频按钮 -->
                <image class="video-image-play" src="/static/img/paly.png" mode="scaleToFill"></image>
                <view class="allBack"></view>
                <!--  蒙层 -->
                <!-- <view class="palyNum">{{ item.video.ppv }}次播放</view> -->
                <!-- <view class="timeLength">{{ filter.filter.returnMTime(item.course.duration) }}</view> -->
            </view>

            <!-- 视频播放层 -->
            <video id="vid" bindpause="pauseClickFn" bindtap="vidClickFn" src="{{item.video.video}}" data-id="{{index}}" class='video' wx:if="{{_index == index}}" objectFit='contain' autoplay='true' controls></video>

            <view class="sharePanel">
                <view class="userInfoBox">
                    <view class="userInfoBoxHead">
                        <image class="userInfoBoxHeadSrc" src="{{item.merchant.head}}" alt />
                        <image class="authState" wx:if="{{item.merchant.authType == 1}}" src="/static/img/identity@2x.png" alt></image>
                        <image class="authState" wx:if="{{item.merchant.authType == 2}}" src="/static/img/Daren@2x.png" alt></image>
                        <image class="authState" wx:if="{{item.merchant.authType == 3}}" src="/static/img/business@2x.png" alt></image>
                    </view>
                    <view class="shopsName">{{item.merchant.nick}}</view>
                    <text wx:if="{{true}}" class="Unconcerned">关注</text>
                    <text wx:if="{{false}}" class="concerned">已关注</text>
                </view>
                <!-- bindtap="showModal" -->  
                <view class="shareButtonBox"  data-course_id='{{item.video.courseId}}' data-title='{{item.video.title}}' data-lecturerInfo='{{item.video.lecturerInfo}}' data-cover='{{item.video.cover}}'>
                    <image wx:if="{{true}}" class="imgSize noBeenCollected" src="/static/img/noBeenCollected@2x.png" alt="未关注"></image>
                    <image wx:if="{{false}}" class="imgSize haveBeenCollected" src="/static/img/haveBeenCollected@2x.png" alt="已关注"></image>
                    <text class="followNum">{{filter.filter.million(11110400)}}</text>
                    <image wx:if="{{true}}" class="imgSize notToMention" src="/static/img/notToMention@2x.png" alt="未点赞"></image>
                    <image wx:if="{{false}}" class="imgSize alreadyPraised" src="/static/img/alreadyPraised@2x.png" alt="已点赞"></image>
                    <text class="thumbsUpNum">{{filter.filter.million(99999)}}</text>
                    <button class="shareBtn" open-type="share"><image class="shareButton" src="/static/img/shareButton.png"></image></button>
                    <text class="shareNum">{{filter.filter.million(99999)}}</text>
                </view>
            </view>
            <view class="line"></view>
        </view>
    </scroll-view>
</view>


<!-- 模态框 -->
<view catchtouchmove="return" class="modals modals-bottom-dialog" hidden="{{hideModal}}">
    <view class="modals-cancel" bindtap="hideModal"></view>
    <view class="bottom-dialog-body bottom-pos" animation="{{animationData}}">
        <view class="borderCl">
            <!-- <view class="btn sendFriends" open-type="share">发送给朋友</view> -->
            <button class="btn sendFriends shareTips" open-type="share">发送给朋友</button>
            <view class="btn" bind:tap="eventDraw">生成海报</view>
        </view>

        <view bindtap="hideModal" class="btn borderCl cancel">取消</view>
    </view>
</view>

<!-- 海報彈框  hidden="{{hideCardModal}}" -->
<view catchtouchmove="return" class="container" bindtap="closeFn" hidden="{{hideCardModal}}">
    <image src="{{shareImage}}" class="share-image"></image>
    <canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage" />
    <button class="savelacally" bind:tap="eventSave">保存图片</button>
</view>

<!-- 下拉框弹出 -->
<view catchtouchmove="return" bindtap="hideDownBox" class="downBox {{hideDownBox?'show':'hide'}}" style="padding-top: {{paddingTop}}px;">
    <view class="downBoxListBox">
        <view class="item " wx:for="{{tabListL}}" wx:key="item" data-id="{{item.id}}" wx:if="{{index > 3}}" bindtap="tipItemBtn">{{item.name}}</view>
    </view>
</view>

// pages/classification/classification.js
const app = getApp();
const timeD = require("../../utils/util.js");
Page({

    /**
     * 页面的初始数据
     */
    data: {
        tabListL: [
            { name: '精选课程1', id: 1 },
            { name: '精选课课程2', id: 2 },
            { name: '精选课程3', id: 3 },
            { name: '精选课课程4', id: 4 },
            { name: '精选课程5', id: 5 },
            { name: '精选课程6', id: 6 },
            { name: '精选7', id: 7 },
            { name: '精选选课选课8', id: 8 },
            { name: '精选9', id: 9 },
            { name: '精选课选课程10', id: 10 },
            { name: '精选课程11', id: 11 },
            { name: '精选课程12', id: 12 },
            { name: '精选课程13', id: 13 },
        ],
        currentTab: 0,
        paddingTop: 0,

        videoPlay: null,
        dataList: [],
        courseId: '197675',
        title: '',
        cover: '', // http://pic.rmb.bdstatic.com/mvideo/cde67c41211d7a46c1fb87138935b912
        videoList: [],
        videoSrcList: [],
        len: 0,
        videoSrcListResult: false,
        hideModal: true, //模态框的状态  true-隐藏  false-显示
        animationData: {}, // 动画集
        painting: {}, // 海報
        shareImage: '', // 生成海报图片
        hideCardModal: true, // 海報彈框
        name: '李大玄',
        flag: false,
        hasLogin: false,
        wxQrcode: '', // 分享的二维码
        hideDownBox: false,

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        if (options.scene) {
            var scene = decodeURIComponent(options.scene);
            var courseId = scene.split('&')[0].split('=')[1];
            this.setData({
                courseId: courseId
            })
        } else if (options.courseId) {
            this.setData({
                courseId: options.courseId
            })
        }
        this.getData();
        // this.eventDraw();
        // this.getUserInfo();
        wx.hideShareMenu();
        this.getPaddingTopFn();
        this.setData({
            hideDownBox: false
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
        this.setData({
            hideDownBox: false
        })
    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    },
    switchTab(e) {
        console.log(e.currentTarget.dataset.index)
        this.setData({
            currentTab: e.currentTarget.dataset.index
        })
    },
    // 点击cover播放，其它视频结束
    videoPlay: function (e) {
        console.log(e)
        var _index = e.currentTarget.dataset.id
        this.setData({
            _index: _index
        })
        //停止正在播放的视频
        var videoContextPrev = wx.createVideoContext(_index + "")
        videoContextPrev.stop();

        setTimeout(function () {
            //将点击视频进行播放
            var videoContext = wx.createVideoContext(_index + "")
            videoContext.play();
        }, 500)
    },
    // 模拟数据加载
    getData: function () {
        this.setData({
            videoList: [{
                "course": {
                    "id": 263211,
                    "cover": "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/236.jpg?2",
                    "videoId": "54319f01af444951949611aafc9fa247",
                    "pv": 0,
                    "ppv": 27710,
                    "title": "体验一下人间疾苦！雷神健身房遭教练虐待",
                    "cfType": 1,
                    "lessonCon": 1,
                    "price": 0.0000,
                    "duration": 191
                },
                "merchant": {
                    "id": 304133,
                    "gender": 1,
                    "nick": "阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德",
                    "head": "http://media-test.xiujianshen.com/RC-Android/user/picture/40eeb9cf718f43c737ef009c7c72114e.jpg",
                    "area": "北京\t昌平",
                    "authType": 3
                },
                "video": {
                    "lessonId": 1257,
                    "cover": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/snapshots/1b512b7eb5e9449eb90bfc42379bbf97-00002.jpg",
                    "courseId": 263211,
                    "title": "体验一下人间疾苦！雷神健身房遭教练虐待",
                    "videoId": "54319f01af444951949611aafc9fa247",
                    "video": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/4182d7ed107a43a7818dd35582efeb5c-5c4120e9f8e360956257e0a86b9b83f0-sd.mp4",
                    "merchantId": 304133,
                    "ppv": 27710,
                    "lecturerInfo": "高级讲师:李鹏"
                }
            }, {
                    "course": {
                        "id": 263211,
                        "cover": "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/236.jpg?2",
                        "videoId": "54319f01af444951949611aafc9fa247",
                        "pv": 0,
                        "ppv": 27710,
                        "title": "体验一下人间疾苦！雷神健身房遭教练虐待",
                        "cfType": 1,
                        "lessonCon": 1,
                        "price": 0.0000,
                        "duration": 191
                    },
                    "merchant": {
                        "id": 304133,
                        "gender": 1,
                        "nick": "阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德",
                        "head": "http://media-test.xiujianshen.com/RC-Android/user/picture/40eeb9cf718f43c737ef009c7c72114e.jpg",
                        "area": "北京\t昌平",
                        "authType": 3
                    },
                    "video": {
                        "lessonId": 1257,
                        "cover": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/snapshots/1b512b7eb5e9449eb90bfc42379bbf97-00002.jpg",
                        "courseId": 263211,
                        "title": "体验一下人间疾苦！雷神健身房遭教练虐待",
                        "videoId": "54319f01af444951949611aafc9fa247",
                        "video": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/4182d7ed107a43a7818dd35582efeb5c-5c4120e9f8e360956257e0a86b9b83f0-sd.mp4",
                        "merchantId": 304133,
                        "ppv": 27710,
                        "lecturerInfo": "高级讲师:李鹏"
                    }
                },
                {
                    "course": {
                        "id": 263211,
                        "cover": "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/236.jpg?2",
                        "videoId": "54319f01af444951949611aafc9fa247",
                        "pv": 0,
                        "ppv": 27710,
                        "title": "体验一下人间疾苦！雷神健身房遭教练虐待",
                        "cfType": 1,
                        "lessonCon": 1,
                        "price": 0.0000,
                        "duration": 191
                    },
                    "merchant": {
                        "id": 304133,
                        "gender": 1,
                        "nick": "阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德",
                        "head": "http://media-test.xiujianshen.com/RC-Android/user/picture/40eeb9cf718f43c737ef009c7c72114e.jpg",
                        "area": "北京\t昌平",
                        "authType": 3
                    },
                    "video": {
                        "lessonId": 1257,
                        "cover": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/snapshots/1b512b7eb5e9449eb90bfc42379bbf97-00002.jpg",
                        "courseId": 263211,
                        "title": "体验一下人间疾苦！雷神健身房遭教练虐待",
                        "videoId": "54319f01af444951949611aafc9fa247",
                        "video": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/4182d7ed107a43a7818dd35582efeb5c-5c4120e9f8e360956257e0a86b9b83f0-sd.mp4",
                        "merchantId": 304133,
                        "ppv": 27710,
                        "lecturerInfo": "高级讲师:李鹏"
                    }
                },
                {
                    "course": {
                        "id": 263211,
                        "cover": "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/236.jpg?2",
                        "videoId": "54319f01af444951949611aafc9fa247",
                        "pv": 0,
                        "ppv": 27710,
                        "title": "体验一下人间疾苦！雷神健身房遭教练虐待",
                        "cfType": 1,
                        "lessonCon": 1,
                        "price": 0.0000,
                        "duration": 191
                    },
                    "merchant": {
                        "id": 304133,
                        "gender": 1,
                        "nick": "阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德",
                        "head": "http://media-test.xiujianshen.com/RC-Android/user/picture/40eeb9cf718f43c737ef009c7c72114e.jpg",
                        "area": "北京\t昌平",
                        "authType": 3
                    },
                    "video": {
                        "lessonId": 1257,
                        "cover": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/snapshots/1b512b7eb5e9449eb90bfc42379bbf97-00002.jpg",
                        "courseId": 263211,
                        "title": "体验一下人间疾苦！雷神健身房遭教练虐待",
                        "videoId": "54319f01af444951949611aafc9fa247",
                        "video": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/4182d7ed107a43a7818dd35582efeb5c-5c4120e9f8e360956257e0a86b9b83f0-sd.mp4",
                        "merchantId": 304133,
                        "ppv": 27710,
                        "lecturerInfo": "高级讲师:李鹏"
                    }
                },
                {
                    "course": {
                        "id": 263211,
                        "cover": "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/236.jpg?2",
                        "videoId": "54319f01af444951949611aafc9fa247",
                        "pv": 0,
                        "ppv": 27710,
                        "title": "体验一下人间疾苦！雷神健身房遭教练虐待",
                        "cfType": 1,
                        "lessonCon": 1,
                        "price": 0.0000,
                        "duration": 191
                    },
                    "merchant": {
                        "id": 304133,
                        "gender": 1,
                        "nick": "阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德",
                        "head": "http://media-test.xiujianshen.com/RC-Android/user/picture/40eeb9cf718f43c737ef009c7c72114e.jpg",
                        "area": "北京\t昌平",
                        "authType": 3
                    },
                    "video": {
                        "lessonId": 1257,
                        "cover": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/snapshots/1b512b7eb5e9449eb90bfc42379bbf97-00002.jpg",
                        "courseId": 263211,
                        "title": "体验一下人间疾苦！雷神健身房遭教练虐待",
                        "videoId": "54319f01af444951949611aafc9fa247",
                        "video": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/4182d7ed107a43a7818dd35582efeb5c-5c4120e9f8e360956257e0a86b9b83f0-sd.mp4",
                        "merchantId": 304133,
                        "ppv": 27710,
                        "lecturerInfo": "高级讲师:李鹏"
                    }
                },
                {
                    "course": {
                        "id": 263211,
                        "cover": "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/236.jpg?2",
                        "videoId": "54319f01af444951949611aafc9fa247",
                        "pv": 0,
                        "ppv": 27710,
                        "title": "体验一下人间疾苦！雷神健身房遭教练虐待",
                        "cfType": 1,
                        "lessonCon": 1,
                        "price": 0.0000,
                        "duration": 191
                    },
                    "merchant": {
                        "id": 304133,
                        "gender": 1,
                        "nick": "阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德",
                        "head": "http://media-test.xiujianshen.com/RC-Android/user/picture/40eeb9cf718f43c737ef009c7c72114e.jpg",
                        "area": "北京\t昌平",
                        "authType": 3
                    },
                    "video": {
                        "lessonId": 1257,
                        "cover": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/snapshots/1b512b7eb5e9449eb90bfc42379bbf97-00002.jpg",
                        "courseId": 263211,
                        "title": "体验一下人间疾苦！雷神健身房遭教练虐待",
                        "videoId": "54319f01af444951949611aafc9fa247",
                        "video": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/4182d7ed107a43a7818dd35582efeb5c-5c4120e9f8e360956257e0a86b9b83f0-sd.mp4",
                        "merchantId": 304133,
                        "ppv": 27710,
                        "lecturerInfo": "高级讲师:李鹏"
                    }
                }
            ]
        });
    },
    // 小程序 发送给朋友
    onShareAppMessage: function (res) {
        // wx.showToast({ title: res, icon: 'success', duration: 2000 })
        var that = this;
        var courseId = that.data.courseId; //获取产品id
        var title = that.data.title; //获取产品标题
        var cover = that.data.cover; //产品图片
        that.hideModal();
        if (res.from === 'button') {
            // 来自页面内转发按钮
            return {
                title: title,
                path: 'pages/index/index?courseId=' + courseId,
                imageUrl: cover, //不设置则默认为当前页面的截图
                success: (res) => {
                    wx.showToast({ title: res, icon: 'success', duration: 2000 })
                },
                fail: (res) => {
                    wx.showToast({ title: res, icon: 'success', duration: 2000 })
                }
            }
        }
    },
    asdasd: function () {
        wx.navigateTo({
            url: '../qwe/qwe',
        })
    },
    // 显示遮罩层  分享按钮的点击事件
    showModal: function (event) {
        // console.log(app.isAuthorized())
        // console.log(app.isAuthorized())
        if (!app.getLoginStatus() || app.isAuthorized() != 3) { //表示app未登录
            this.needLogin();
            return;
        }
        // 获取参数
        this.getWxQrcode(); // 调取接口  获取二维码
        var parameter = event.currentTarget.dataset; // 参数转存
        var that = this;

        that.setData({
            hideModal: false,
            courseId: parameter.course_id,
            cover: parameter.cover,
            title: parameter.title,
            lecturerInfo: parameter.lecturerinfo.split(':')[1] + ' ' + parameter.lecturerinfo.split(':')[0]
        })

        var animation = wx.createAnimation({
            duration: 600, //动画的持续时间 默认600ms   数值越大，动画越慢   数值越小，动画越快
            timingFunction: 'ease', //动画的效果 默认值是linear
        })
        this.animation = animation
        setTimeout(function () {
            that.fadeIn(); //调用显示动画
        }, 200);
        app.globalData.authorized;
    },
    // 隐藏遮罩层
    hideModal: function () {
        var that = this;
        var animation = wx.createAnimation({
            duration: 800, //动画的持续时间 默认800ms   数值越大，动画越慢   数值越小，动画越快
            timingFunction: 'ease', //动画的效果 默认值是linear
        })
        this.animation = animation
        that.fadeDown(); //调用隐藏动画   
        setTimeout(function () {
            that.setData({
                hideModal: true
            })
        }, 720) //先执行下滑动画，再隐藏模块

    },
    //动画集
    fadeIn: function () {
        this.animation.translateY(0).step()
        this.setData({
            animationData: this.animation.export() //动画实例的export方法导出动画数据传递给组件的animation属性
        })
    },
    fadeDown: function () {
        this.animation.translateY(300).step()
        this.setData({
            animationData: this.animation.export(),
        })
    },
   
    eventSave() {
        wx.saveImageToPhotosAlbum({
            filePath: this.data.shareImage,
            success(res) {
                wx.showToast({
                    title: '保存图片成功',
                    icon: 'success',
                    duration: 2000
                })
            },
            fail: function (res) {
                console.log(res)
            }
        })
    },
    closeFn() {
        this.setData({
            hideCardModal: true,
            shareImage: '',
            painting: {}
        });
    },
    eventGetImage(event) {
        wx.hideLoading()
        const { tempFilePath, errMsg } = event.detail
        if (errMsg === 'canvasdrawer:ok') {
            this.setData({
                shareImage: tempFilePath
            })
        }
    },
    // 每一个视频点击事件 展示原封面
    vidClickFn(event) {
        let query = wx.createSelectorQuery();
        let queryNode = query.selectAll('#vid')
        if (this.data.flag == false) {
            this.setData({ flag: true })
        } else {
            this.setData({ flag: false })
        }
        if (queryNode.pause) {
            this.setData({ flag: false })
        } else {
            this.setData({ flag: true })
        }
    },
    needLogin() {      //需要登录
        this.setData({
            hasLogin: true
        });
        this.selectComponent("#dialogss").getData();
    },
    requestErr() {   //接口报402时
        if (!app.getLoginStatus()) { //表示app未登录
            this.needLogin();
        } else {

        }
    },
    visibleToggle(e) {
        this.setData({
            hasLogin: e.detail
        });
    },
    // 点击分享按钮 获取小程序二维码
    getWxQrcode() {
        let that = this;
        that.setData({ wxQrcode: '' });
        let data = {
            scene: 'courseId=' + that.data.courseId, // 课程id
            page: 'pages/index/index',
            type: 1,
            isHyaline: true,
        };
        app.apiRequest('/auth/wx/applet/qrcode', data, 'post').then(res => {
            if (res.data.code == 0) {
                that.setData({
                    wxQrcode: res.data.data
                });
                console.log(res.data.data)
                // wx.showLoading({ title: res.data, duration: 2000 })
            } else {
                wx.showLoading({ title: JSON.stringify(res.data.code + ':' + res.data.message), duration: 2000 })
            }
        }).catch(error => {
            // handle error
        })
    },
    // 获取元素高度
    getPaddingTopFn() {
        let that = this;
        wx.createSelectorQuery().selectAll('.classification').boundingClientRect(function (rects) {
            that.setData({
                paddingTop: rects[0].height,
            })
        }).exec();
    },
    // 点击下拉按钮时
    downLoadMore() {
        if (this.data.hideDownBox) { // true
            this.setData({
                hideDownBox: false
            });
        } else { // false
            this.setData({
                hideDownBox: true
            });
        }
    },
    // 下拉tab栏点击事件
    tipItemBtn(e) {
        var item;
        this.data.tabListL.forEach((ele,i) => {
            if (ele.id == e.currentTarget.dataset.id) {
                item = ele;
                this.data.tabListL.splice(i, 1);
                this.data.tabListL.unshift(item);
                this.setData({
                    tabListL: this.data.tabListL
                })
            }
        })
        this.setData({
            hideDownBox: false
        });
    },

})

/* pages/classification/classification.wxss */

.classification {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* height: 100%; */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: #fafafa;
}

.container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* height: 100%; */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: #fafafa;
}

.tab-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    background: linear-gradient(270deg, rgba(254, 115, 88, 1) 0%, rgba(235, 70, 84, 1) 100%);
}

.tab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 28rpx;
    color: rgb(255, 255, 255);
    text-align: center;
    height: 100%;
}

.tab-active {
    position: relative;
}

.tab-active .bobr {
    display: inline-block;
    position: absolute;
    bottom: 2rpx;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 4px;
    width: 24px;
    background-color: #fff;
    border-radius: 4px;
}

.loadMore {
    width: 100rpx;
    height: 64rpx;
    margin-bottom: -10rpx;
    /* background: pink; */
}

page {
    width: 100%;
    height: 100%;
}

.content-wrapper {
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------------------------- */

.item-box .video-image-box {
    height: 420rpx;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-x: 30rpx;
    position: relative;
}

.item-box .video-cover-box {
    height: 100%;
    width: 100%;
    background: #000;
    text-align: center;
}

.item-box .video-image-box .video-cover-box .video-image {
    height: 100%;
    width: 100%;
}

.item-box .video {
    height: 400rpx;
    width: 100%;
    margin: 0 30rpx 0 0;
    position: relative;
}

.item-box .video-image-box .video-image-play {
    position: absolute;
    width: 80rpx;
    height: 80rpx;
    top: calc(50% - 40rpx);
    left: calc(50% - 40rpx);
    z-index: 8;
}

/* -------------------------------- */

.freeVideoBox {
    position: relative;
    width: 100%;
}

.freeVideoPanel {
    position: relative;
    width: 100%;
    height: 420rpx;
}

.freeVideoPanel .allBack {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}

.placeHolderImg {
    width: 100%;
    height: 420rpx;
    object-fit: contain;
}

.sharePanel {
    padding: 20rpx 30rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.userInfoBox {
    display: flex;
    align-items: center;
}

.userInfoBoxHead {
    position: relative;
    width: 74rpx;
    height: 74rpx;
}

.userInfoBoxHead .userInfoBoxHeadSrc {
    width: 74rpx;
    height: 74rpx;
    border-radius: 50%;
}

.userInfoBoxHead .authState {
    position: absolute;
    width: 30rpx;
    height: 30rpx;
    bottom: 0;
    right: 0;
    z-index: 6;
}

.shopsName {
    width: 260rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    font-size: 28rpx;
    margin-left: 20rpx;
}

/* 未关注 */

.concerned {
    color: #dbdbdb;
    font-size: 26rpx;
    border-left: 2rpx solid #eee;
    padding-left: 8rpx;
}

/* 已关注 */

.Unconcerned {
    color: #eb4654;
    font-size: 26rpx;
    border-left: 2rpx solid #eee;
    padding-left: 8rpx;
}

.shareButtonBox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    color: #333;
}

.shareButtonBox .imgSize {
    width: 36rpx;
    height: 34rpx;
    margin-right: 56rpx;
}

.shareButtonBox text {
    font-size: 18rpx;
    color: #666;
}

/* 关注数 */

.shareButtonBox .followNum {
    position: absolute;
    right: 160rpx;
    top: 5rpx;
}

/* 点赞数 */

.shareButtonBox .thumbsUpNum {
    position: absolute;
    right: 70rpx;
    top: 5rpx;
}

/* 分享数 */

.shareButtonBox .shareNum {
    position: absolute;
    right: -10rpx;
    top: 5rpx;
}

.shareButtonBox .shareBtn {
    margin: 0;
    padding: 0;
    height: auto;
    background: #fff;
    margin-top: 5rpx;
    line-height: auto;
}

.shareButtonBox .shareButton {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
    background-size: contain;
}

.shareButtonBox .shareTips {
    height: 38rpx;
    padding: 0;
    font-size: 26rpx;
    background-color: transparent;
    border: 1rpx solid transparent;
    line-height: 35rpx;
}

button::after {
    border: 0;
    border-radius: 0;
}

.getPlayResult image {
    position: absolute;
    width: 80rpx;
    height: 80rpx;
    background-size: cover;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.freeVideoPanel .palyNum {
    z-index: 10;
    color: rgb(255, 255, 255);
    left: 30rpx;
    position: absolute;
    bottom: 25rpx;
    font-size: 26rpx;
    text-shadow: 1rpx 2rpx #bbb;
}

.timeLength {
    position: absolute;
    bottom: 22rpx;
    right: 30rpx;
    padding: 7rpx 18rpx;
    border-radius: 24rpx;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 24rpx;
    z-index: 10;
}

.videoTitle {
    position: absolute;
    max-width: 700rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    top: 18rpx;
    left: 30rpx;
    color: #fff;
    font-size: 38rpx;
    z-index: 10;
    font-weight: 700;
}

.item-box .topbgblack {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 160rpx;
}

.videoTeacher {
    position: absolute;
    max-width: 400rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    top: 68rpx;
    left: 30rpx;
    color: #fff;
    font-size: 24rpx;
    z-index: 10;
}

.BeforPreviewHand {
    width: 8rpx;
    height: 8rpx;
    background-size: cover;
}

.line {
    width: 100%;
    height: 16rpx;
    background-color: #f7f7f7;
}

/*模态框*/

.modals {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.modals .modals-cancel {
    position: absolute;
    z-index: 12;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.modals .bottom-dialog-body {
    position: absolute;
    z-index: 10001;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30rpx;
    height: 300rpx;
    /* background-color: #fff; */
}

/*动画前初始位置*/

.modals .bottom-pos {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.modals .btn {
    background: rgba(255, 255, 255, 0.98);
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 105rpx;
    justify-content: center;
    font-size: 32rpx;
    border-radius: 0;
}

.modals .sendFriends {
    border-bottom: 0.1rpx solid #cacaca;
}

.modals .borderCl {
    border-radius: 12rpx;
    overflow: hidden;
}

.modals .cancel {
    margin: 16rpx 0;
}

/* 海報 */

.container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    /* background: pink; */
}

.container .share-image {
    /* background: green; */
    margin: 0 auto;
    text-align: center;
    margin-top: 230rpx;
    width: 650rpx;
    height: 720rpx;
    /* background: pink; *//* padding: 1px; */
}

.container .savelacally {
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%, -50%);
    width: 254rpx;
    height: 90rpx;
    line-height: 90rpx;
    background: linear-gradient(360deg, rgba(254, 145, 95, 1) 0%, rgba(254, 182, 126, 1) 100%);
    border-radius: 50rpx;
    font-size: 32rpx;
    color: #fff;
}

/* ---- 顶部下拉框 -------------------------------------------------- */

.downBox {
    position: fixed;
    top: 0;
    /* top: 100%; */
    left: 0;
    width: 100%;
    background: rgb(0, 0, 0, 0.5);
    z-index: 20;
    transition: all 1s ease;
    overflow: hidden;
}

.downBox .downBoxListBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    padding: 30rpx 0 42rpx 0;
}

.downBox .downBoxListBox .item {
    display: flex;
    align-items: center;
    justify-content: center;
    background:#F6F6F6;
    border-radius: 8rpx;
    padding: 18rpx 22rpx;
    margin: 0 18rpx 18rpx 18rpx;
    font-size: 24rpx;
    color: #333;
    /* margin-bottom: 18rpx; */
}

.hide{
    height: 0;
}

.show{
    height: 100%;
    /* top: 0; */
}
@keyframes slidedown{
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}

@keyframes slideup{
    from {
        height: 100%;
    }
    to {
        height: 0;
    }
}

мо仙堡杠把子ご灬

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
微信小程序列表播放视频播放当前视频上一个暂停

一身正气，浪荡自由。<wxs module="filter" src="../../utils/returnMTime.wxs"&g
复制链接

扫一扫