小程序简单版音乐播放器

news2024/10/7 9:23:07

小程序简单版音乐播放器

在这里插入图片描述

结构

先来看看页面结构

    <!-- wxml -->
    
<!-- 标签页标题 -->
<view class="tab">
  <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
  <view class="tab-item {{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
  <view class="tab-item {{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<!-- 内容区域 -->
<view class="content">
  <swiper current="{{item}}" bindchange="changeTab">
    <swiper-item>
      <!-- 内容滚动区域 -->
      <scroll-view class="content-info" scroll-y>
        <!-- 轮播图 -->
        <swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
          <swiper-item>
            <image src="/images/02.jpg" mode="aspectFill" />
          </swiper-item>
          <swiper-item>
            <image src="/images/03.jpg" mode="aspectFill" />
          </swiper-item>
          <swiper-item>
            <image src="/images/04.jpg" mode="aspectFill" />
          </swiper-item>
        </swiper>
        <!-- 功能按钮 -->
        <view class="content-info-portal">
          <view>
            <image src="/images/04.png" mode="aspectFill" catch:tap="fm" />
            <text>私人FM</text>
          </view>
          <view>
            <image src="/images/05.png" mode="aspectFill" />
            <text>每日歌曲推荐</text>
          </view>
          <view>
            <image src="/images/06.png" mode="aspectFill" />
            <text>云音乐新歌榜</text>
          </view>
        </view>
        <!-- 热门音乐 -->
        <view class="content-info-list">
          <view class="list-title">推荐歌曲</view>
          <view class="list-inner">
            <view class="list-item">
              <image src="/images/hush.png" mode="aspectFill" />
              <view>Hush</view>
            </view>
            <view class="list-item">
              <image src="/images/talk.png" mode="aspectFill" />
              <view>Talk</view>
            </view>
            <view class="list-item">
              <image src="/images/men.png" mode="aspectFill" />
              <view>Memories</view>
            </view>
            <view class="list-item">
              <image src="/images/hour.png" mode="aspectFill" />
              <view>golden hour</view>
            </view>
            <view class="list-item">
              <image src="/images/mess.png" mode="aspectFill" />
              <view>Yes I'm A Mess</view>
            </view>
            <view class="list-item">
              <image src="/images/iii.png" mode="aspectFill" />
              <view>III Do It</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </swiper-item>
    <swiper-item>
      <!-- 播放器页面 -->
      <include src="play.wxml" />
    </swiper-item>
    <swiper-item>
      <include src="playlist.wxml" />
    </swiper-item>
  </swiper>
</view>
<!-- 底部播放器 -->
<view class="player">
  <image class="player-cover" src="{{play.coverImgUrl}}" mode="aspectFill" />
  <view class="player-info">
    <view class="player-info-title">{{play.title}}</view>
    <view class="player-info-singer">{{play.singer}}</view>
  </view>
  <view class="player-controls">
    <!-- 切换到播放列表 -->
    <image src="/images/01.png" bindtap="changePage" data-page="2" mode="aspectFill" />
    <!-- 播放或暂停 -->
    <image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" mode="aspectFill" />
    <image wx:else src="/images/02stop.png" bindtap="pause" mode="aspectFill" />
    <!-- 下一曲 -->
    <image src="/images/03.png" bindtap="next" mode="aspectFill" />
  </view>
</view>

其中一些代码可以使用 wx:for 循环创建，这边为了简单明了就没有循环创建

页面样式

page {
  display: flex;
  flex-direction: column;
  background: #17181a;
  color: #ccc;
  height: 100%;
}

.tab {
  display: flex;
}

.tab-item {
  flex: 1;
  font-size: 10pt;
  text-align: center;
  line-height: 72rpx;
  border-bottom: 6rpx solid #eee;
}

.content {
  flex: 1;
}

.content > swiper {
  height: 100%;
}

.player {
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

.tab-item.active {
  color: #c25b5b;
  border-bottom-color: #c25b5b;
}

.content-info {
  height: 100%;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

/* 轮播图 */

.content-info-slide {
  height: 302rpx;
  margin-bottom: 20px;
}

.content-info-slide image {
  width: 100%;
  height: 100%;
}

/* 功能按钮 */

.content-info-portal {
  display: flex;
  margin-bottom: 15px;
}

.content-info-portal > view {
  flex: 1;
  font-size: 11pt;
  text-align: center;
}

.content-info-portal image {
  width: 120rpx;
  height: 120rpx;
  display: block;
  margin: 20rpx auto;
}

/* 热门音乐 */

.content-info-list {
  font-size: 11pt;
  margin-bottom: 20rpx;
}

.content-info-list > .list-title {
  margin: 20rpx 35rpx;
}

.content-info-list > .list-inner {
  display: flex;
  flex-wrap: wrap;
  margin: 0 20rpx;
}

.content-info-list > .list-inner > .list-item {
  flex: 1;
}

.content-info-list > .list-inner > .list-item > image {
  display: block;
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
  border-radius: 10rpx;
  border: 1rpx solid #555;
}

.content-info-list > .list-inner > .list-item > view {
  width: 200rpx;
  margin: 10rpx auto;
  font-size: 10pt;
}

/* 播放器 */

.content-play {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

.content-play-info > view {
  color: #888;
  font-size: 11pt;
}

/* 底部播放器 */

.player {
  display: flex;
  align-items: center;
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

.player-cover {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 8rpx;
  border: 1px solid #333;
}

.player-info {
  flex: 1;
  font-size: 10pt;
  line-height: 38rpx;
  margin-left: 20rpx;
  padding-bottom: 8rpx;
}

.player-info-singer {
  color: #888;
}

.player-controls image {
  width: 80rpx;
  height: 80rpx;
  margin-right: 15rpx;
}

/* 显示专辑页面样式 */

.content-play-cover image {
  animation: rotateImage 10s linear infinite;
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  border: 1px solid #333;
}

@keyframes rotateImage {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 播放进度和时间 */

.content-play-progress {
  display: flex;
  align-items: center;
  margin: 0 35rpx;
  font-size: 9pt;
  text-align: center;
}

.content-play-progress > view {
  flex: 1;
}

/* 播放列表 */

.playlist-item {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #333;
  height: 112rpx;
}

.playlist-cover {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 8rpx;
  border: 1px solid #333;
}

.playlist-info {
  flex: 1;
  font-size: 10pt;
  line-height: 38rpx;
  margin-left: 20rpx;
  padding-bottom: 8rpx;
}

.playlist-info-singer {
  color: #888;
}

.playlist-controls {
  font-size: 10pt;
  margin-right: 20rpx;
  color: #c25b5b;
}

核心代码

音乐数据

🆗，接下来创建播放列表数据

data: {
    item: 0,
    tab: 0,
    // 播放列表数据
    playlist: [{
      id: 1,
      title: 'Always Online',
      singer: '林俊杰',
      src: 'http://localhost:3000/林俊杰 - Always Online.mp3',
      coverImgUrl: '/images/jj.jpeg'
    }, {
      id: 2,
      title: '不得不爱',
      singer: '潘玮柏、弦子',
      src: 'http://localhost:3000/潘玮柏、弦子 - 不得不爱.mp3',
      coverImgUrl: '/images/pwb.jpg'
    }, {
      id: 3,
      title: '大城小爱',
      singer: '王力宏',
      src: 'http://localhost:3000/王力宏 - 大城小爱.mp3',
      coverImgUrl: '/images/wlh.jpeg'
    }, {
      id: 4,
      title: '偏爱',
      singer: '张芸京',
      src: 'http://localhost:3000/张芸京 - 偏爱.mp3',
      coverImgUrl: '/images/pa.jpeg'
    }],
    state: 'paused',
    playIndex: 0,
    play: {
      currentTime: '00:00',
      duration: '00:00',
      percent: 0,
      title: '',
      singer: '',
      coverImgUrl: '/images/cover.jpg',
    }
  },

切换功能

来实现一些页面之间简单的切换

 // 页面切换
  changeItem: function (e) {
    this.setData({
      item: e.target.dataset.item,
    })
  },
  // tab切换
  changeTab: function (e) {
    this.setData({
      tab: e.detail.current
    })
  },

播放功能

// 实现播放器播放功能
  audioCtx: null,
  onReady: function () {
    this.audioCtx = wx.createInnerAudioContext()
    // 默认选择第1曲
    this.setMusic(0)
    var that = this
    // 播放进度检测
    this.audioCtx.onError(function () {
      console.log('播放失败：' + that.audioCtx.src)
    })
    // 播放完成自动换下一曲
    this.audioCtx.onEnded(function () {
      that.next()
    })
    // 自动更新播放进度
    this.audioCtx.onPlay(function () {})
    this.audioCtx.onTimeUpdate(function () {
      that.setData({
        'play.duration': formatTime(that.audioCtx.duration),
        'play.currentTime': formatTime(that.audioCtx.currentTime),
        'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100
      })
    })
    // 格式化时间
    function formatTime(time) {
      var minute = Math.floor(time / 60) % 60;
      var second = Math.floor(time) % 60
      return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
    }
  },
  // 音乐播放
  setMusic: function (index) {
    var music = this.data.playlist[index]
    this.audioCtx.src = music.src
    this.setData({
      playIndex: index,
      'play.title': music.title,
      'play.singer': music.singer,
      'play.coverImgUrl': music.coverImgUrl,
      'play.currentTime': '00:00',
      'play.duration': '00:00',
      'play.percent': 0
    })
  },

  // 播放按钮
  play: function () {
    this.audioCtx.play()
    this.setData({
      state: 'running'
    })
  },

  // 暂停按钮
  pause: function () {
    this.audioCtx.pause()
    this.setData({
      state: 'paused'
    })
  },

  // 下一曲按钮
  next: function () {
    var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
    this.setMusic(index)
    if (this.data.state === 'running') {
      this.play()
    }
  },

接下来就是一些必不可少的小功能了

// 滚动条调节歌曲进度
  sliderChange: function (e) {
    var second = e.detail.value * this.audioCtx.duration / 100
    this.audioCtx.seek(second)
  },

  // 播放列表换曲功能
  change: function (e) {
    this.setMusic(e.currentTarget.dataset.index)
    this.play()
  }

🆗，最后的就剩下node服务了，这边node服务只是为了挂载音乐文件这些静态资源。
这边我也会将服务端上传到本篇博客，把自己需要的MP3或MP4格式文件放入到htdocs中即可。
这边怕引起版权纠纷和维权问题就不把歌曲文件放入其中
在这里插入图片描述

node 下面代码存放在 index.js 中 请记得使用 yarn 或者 npm 安装以下的引入文件

var express = require('express')
var serveIndex = require('serve-index')
var serveStatic = require('serve-static')
var multiparty = require('multiparty')
var finalhandler = require('finalhandler')
var util = require('util')

var LOCAL_BIND_PORT = 3000
var app = express()

app.post('/upload', function (req, res) {
  var form = new multiparty.Form()
  form.encoding = 'utf-8'
  form.uploadDir = './htdocs/upfile'
  form.maxFilesSize = 4 * 1024 * 1024
  form.parse(req, function (err, fields, files) {
    if (err) {
      console.log('parse error: ' + err)
    } else {
      console.log('parse files: ' + JSON.stringify(files))
    }
    res.writeHead(200, { 'content-type': 'text/plain;charset=utf-8' })
    res.write('received upload')
    res.end()
  })
})

var serve = serveStatic('./htdocs')
app.use('/', serveIndex('./htdocs', { 'icons': true }))

app.get('/*', function (req, res) {
  serve(req, res, finalhandler(req, res))
});

// console.log(`Start static file server at ::${LOCAL_BIND_PORT}, Press ^ + C to exit`)
console.log('启动成功')

app.listen(LOCAL_BIND_PORT)
// 监听3000端口
// app.listen(3000, () => {
//   console.log('server running at http://127.0.0.1:3000')
// })

最后附上完整代码

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    item: 0,
    tab: 0,
    // 播放列表数据
    playlist: [{
      id: 1,
      title: 'Always Online',
      singer: '林俊杰',
      src: 'http://localhost:3000/林俊杰 - Always Online.mp3',
      coverImgUrl: '/images/jj.jpeg'
    }, {
      id: 2,
      title: '不得不爱',
      singer: '潘玮柏、弦子',
      src: 'http://localhost:3000/潘玮柏、弦子 - 不得不爱.mp3',
      coverImgUrl: '/images/pwb.jpg'
    }, {
      id: 3,
      title: '大城小爱',
      singer: '王力宏',
      src: 'http://localhost:3000/王力宏 - 大城小爱.mp3',
      coverImgUrl: '/images/wlh.jpeg'
    }, {
      id: 4,
      title: '偏爱',
      singer: '张芸京',
      src: 'http://localhost:3000/张芸京 - 偏爱.mp3',
      coverImgUrl: '/images/pa.jpeg'
    }],
    state: 'paused',
    playIndex: 0,
    play: {
      currentTime: '00:00',
      duration: '00:00',
      percent: 0,
      title: '',
      singer: '',
      coverImgUrl: '/images/cover.jpg',
    }
  },


  // 页面切换
  changeItem: function (e) {
    this.setData({
      item: e.target.dataset.item,
    })
  },
  // tab切换
  changeTab: function (e) {
    this.setData({
      tab: e.detail.current
    })
  },

  // 实现播放器播放功能
  audioCtx: null,
  onReady: function () {
    this.audioCtx = wx.createInnerAudioContext()
    // 默认选择第1曲
    this.setMusic(0)
    var that = this
    // 播放进度检测
    this.audioCtx.onError(function () {
      console.log('播放失败：' + that.audioCtx.src)
    })
    // 播放完成自动换下一曲
    this.audioCtx.onEnded(function () {
      that.next()
    })
    // 自动更新播放进度
    this.audioCtx.onPlay(function () {})
    this.audioCtx.onTimeUpdate(function () {
      that.setData({
        'play.duration': formatTime(that.audioCtx.duration),
        'play.currentTime': formatTime(that.audioCtx.currentTime),
        'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100
      })
    })
    // 格式化时间
    function formatTime(time) {
      var minute = Math.floor(time / 60) % 60;
      var second = Math.floor(time) % 60
      return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
    }
  },
  // 音乐播放
  setMusic: function (index) {
    var music = this.data.playlist[index]
    this.audioCtx.src = music.src
    this.setData({
      playIndex: index,
      'play.title': music.title,
      'play.singer': music.singer,
      'play.coverImgUrl': music.coverImgUrl,
      'play.currentTime': '00:00',
      'play.duration': '00:00',
      'play.percent': 0
    })
  },

  // 播放按钮
  play: function () {
    this.audioCtx.play()
    this.setData({
      state: 'running'
    })
  },

  // 暂停按钮
  pause: function () {
    this.audioCtx.pause()
    this.setData({
      state: 'paused'
    })
  },

  // 下一曲按钮
  next: function () {
    var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
    this.setMusic(index)
    if (this.data.state === 'running') {
      this.play()
    }
  },

  // 滚动条调节歌曲进度
  sliderChange: function (e) {
    var second = e.detail.value * this.audioCtx.duration / 100
    this.audioCtx.seek(second)
  },

  // 播放列表换曲功能
  change: function (e) {
    this.setMusic(e.currentTarget.dataset.index)
    this.play()
  }
})

在这里插入图片描述

  • 失联

最后编辑时间 2024，06，17；10：11

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1830655.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

DAY5-力扣刷题

DAY5-力扣刷题

1.两两交换链表中的节点 24. 两两交换链表中的节点 - 力扣&#xff08;LeetCode&#xff09; 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换…
阅读更多...
ElasticSearch + kibana：类型声明

ElasticSearch + kibana：类型声明

当我们使用 kibana 创建索引时&#xff0c;如果不申明数据类型&#xff0c;默认字符串赋予 text类型&#xff0c;如下图所示 接下来我们继续创建多条数据如下&#xff1a; 下面我们来检索下&#xff1a; 通过以上两个案例我们发现&#xff0c;使用 match 模糊查询 li-3 明明…
阅读更多...
亚马逊、速卖通等跨境平台测评自养号有哪些好处？

亚马逊、速卖通等跨境平台测评自养号有哪些好处？

测评自养号顾名思义就是自己用国外真实环境养出来的买家账号&#xff0c;通过国外的手机号、邮箱、真实收货地址&#xff0c;设备环境、当地的住宅IP注册和养出来的买手号 很多卖家都了解过自养号&#xff0c;注册一个账号成本就几块钱&#xff0c;账号又可以长期使用&#xf…
阅读更多...
【机器学习】图神经网络：深度解析图神经网络的基本构成和原理以及关键技术

【机器学习】图神经网络：深度解析图神经网络的基本构成和原理以及关键技术

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 引言一、图数据及其应用场景1.1 图数据的定义和特征1.2 常见的图数据结构1.2.1 社交网络1.2.2 知识图谱1.2.3 分子结构1.2.4 交通网络 1.3 图数据在不同领域的应用实例1.3.1 社交网络中的推荐系统1.3.2 知识图谱中的信息检索…
阅读更多...
如何学习创建和使用 Java 归档（JAR）文件

如何学习创建和使用 Java 归档（JAR）文件

1. 简介 JAR&#xff08;Java ARchive&#xff09;文件是一种用于打包多个Java类、资源文件和元数据的压缩文件格式。它在Java开发和发布过程中扮演着重要角色。通过使用JAR文件&#xff0c;开发者可以将应用程序的所有组件打包在一个文件中&#xff0c;方便分发和部署。 2. …
阅读更多...
Visual Studio Code 配置教程，手把手教你如何配置

Visual Studio Code 配置教程，手把手教你如何配置

文章目录 引言1. 安装 VS Code1.1 下载和安装1.2 初次启动 2. 基本配置2.1 设置用户和工作区配置2.2 常用配置项 3. 安装和配置扩展插件3.1 安装扩展3.2 推荐扩展3.3 配置扩展 4. 主题和配色方案4.1 安装主题4.2 切换主题4.3 自定义配色方案 5. 版本控制集成5.1 配置 Git5.2 Gi…
阅读更多...
COMSOL导入图片建模教程

COMSOL导入图片建模教程

研究背景 COMSOL Multiphysics作为多物理场仿真领域的高端软件&#xff0c;可允许用户通过建立数学模型来模拟和预测现实世界中的各种物理现象。将图片导入COMSOL软件进行建模&#xff0c;根植于现代科学研究和工程设计对高效、准确模拟技术日益增长的需求&#xff0c;它允许用…
阅读更多...
【0008day】Shiny的介绍

【0008day】Shiny的介绍

介绍&#xff1a;Shiny 是一个开源 R 包&#xff0c;它提供了一个优雅而强大的 Web 框架&#xff0c;用于使用 R 构建 Web 应用程序。Shiny 可以帮助您将分析转变为交互式 Web 应用程序&#xff0c;而无需 HTML、CSS 或 JavaScript 知识。 # download R package pkgtest <-…
阅读更多...
超分辨率开源库 GitHub 热门项目分享

超分辨率开源库 GitHub 热门项目分享

超分辨率(Super-Resolution)就是将低分辨率(low resolution)的图像通过算法提升到高分辨率(high resolution)的过程。 超分辨率技术在多个领域有广泛应用&#xff0c;包括但不限于以下几个方面&#xff1a; 医疗成像&#xff1a;在医学影像中&#xff0c;超分辨率技术可以帮助…
阅读更多...
手表化身车钥匙：智慧控车，优雅随行

手表化身车钥匙：智慧控车，优雅随行

智能汽车时代来临&#xff0c;传统车钥匙正在逐渐被取代。HUAWEI WATCH 4 Pro及HUAWEI WATCH Ultimate系列手表配对问界M9等&#xff0c;不仅可以化身 UWB 数字车钥匙&#xff0c;无感解锁车辆&#xff0c;还可以实现智能语音控车等功能&#xff0c;让你从容出行&#xff0c;优…
阅读更多...
美国裸机云站群服务器使用指南

美国裸机云站群服务器使用指南

在当今数字化时代&#xff0c;网站和应用程序的稳定运行对于企业和个人都至关重要。为了满足日益增长的业务需求&#xff0c;裸机云站群服务器成为了一个理想的选择。以下是美国裸机云站群服务器的使用指南&#xff0c;帮助您更好地利用这一强大的云服务。 一、选择信誉良好的云…
阅读更多...
【javaEE-有关CPU进程和线程实现的并发编程及二者的区别】

【javaEE-有关CPU进程和线程实现的并发编程及二者的区别】

&#x1f525;&#x1f525;&#x1f525;有关进程并发编程开发的成本问题 这次之前其实我们所有的写的程序都是使用单核心来运行的&#xff0c;但是一般我们的计算机都有很多核心&#xff0c;如果我们编程的时候&#xff0c;只使用一个核心的话&#xff0c;其实这是一个非常大…
阅读更多...
光功率计传感器

光功率计传感器

光探测仪表： 激光功率计探头按照不同的原理和材料分为热电堆型、光电二极管型以及包含两种传感器的综合探头， 激光能量计则有热释电传感器和热电堆传感器探头 激光功率计分为三种类 型 。 第一种类型为光 电 型 ， 通过将光 能转换为 电 信 号来表征所接收 的 激光功率 大小 …
阅读更多...
2024第15届东莞国际电子智造及微电子展览会

2024第15届东莞国际电子智造及微电子展览会

2024第15届东莞国际电子智造及微电子展览会 The 15th Dongguan International Electronic Intelligent Manufacturing and Microelectronics Exhibition in 2024 时间&#xff1a;2024年11月18-20日 地点&#xff1a;广东现代国际展览中心 详询主办方陆先生 I38&#xff0…
阅读更多...
排序（2）【选择排序】【快速排序】

排序（2）【选择排序】【快速排序】

一.选择排序 选择排序就是选择一个数组的最大的数字或者最小的数字&#xff0c;放在一整个数组的最后或者开头的位置。 1.选择排序的实现 我们可以对选择排序进行一些加强&#xff0c;普通的选择排序是选择最小的数&#xff0c;然后进行交换。这个加强之后就是我们既要选择出…
阅读更多...
北京物业管理app开发，便民服务，智慧管理

北京物业管理app开发，便民服务，智慧管理

居民的现代化生活离不开物业的支持&#xff0c;物业作为服务、保障居民生活的管理单位&#xff0c;从门禁、电梯、快递、停车等方方面面都影响着居民的日常生活。随着经济与科技的不断发展&#xff0c;居民对物业的服务也提出了新的要求。 一&#xff0e; 北京物业管理的现状 …
阅读更多...
element--el-table合计换行显示

element--el-table合计换行显示

el-table合计换行显示 效果图实现1、使用到的参数2、代码演示 效果图 实现 1、使用到的参数 官网链接&#xff1a;element-table 将show-summary设置为true就会在表格尾部展示合计行。默认情况下&#xff0c;对于合计行&#xff0c;第一列不进行数据求合操作&#xff0c;而是…
阅读更多...
勾八头歌网安之标准ACL、扩展ACL

勾八头歌网安之标准ACL、扩展ACL

标准ACL vs 扩展ACL 我是分享我的快乐的终于写完啦&#xff01;&#xff01;&#xff01;&#xff01;我有时间会把步骤写上来的 也不知有人需要吗哈哈哈 vs
阅读更多...
LabVIEW利用旋转编码器脉冲触发数据采集

LabVIEW利用旋转编码器脉冲触发数据采集

利用旋转编码器发出的脉冲控制数据采集&#xff0c;可以采用硬件触发方式&#xff0c;以确保每个脉冲都能触发一次数据采集。本文提供了详细的解决方案&#xff0c;包括硬件连接、LabVIEW编程和触发设置&#xff0c;确保数据采集的准确性和实时性。 一、硬件连接 1. 旋转编码…
阅读更多...
PyCharm配置教程，手把手教你如何配置

PyCharm配置教程，手把手教你如何配置

文章目录 引言1. 安装 PyCharm1.1 下载和安装1.2 初次启动 2. 基本配置2.1 设置界面2.2 常用配置项 3. 项目配置3.1 创建新项目3.2 配置解释器 4. 虚拟环境配置4.1 创建虚拟环境4.2 使用已有虚拟环境4.3 管理依赖 5. 插件和扩展5.1 安装插件5.2 推荐插件 6. 调试配置6.1 配置调…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023