【微信小程序 swiper swiper-item】

用swiper与swiper-item做轮播

【轮播效果】

代码:

bash 复制代码
	<swiper class="swiper-container">
	  <swiper-item>
	    <view class="item">A</view>
	  </swiper-item>
	  <swiper-item>
	    <view class="item">B</view>
	  </swiper-item>
	  <swiper-item>
	    <view class="item">C</view>
	  </swiper-item>
	</swiper>

样式

bash 复制代码
	.swiper-container {
	  height: 150px;
	}
	.item{
	  height: 100%;
	  text-align: center;
	  line-height: 150px;
	}
	swiper-item:nth-child(1) .item{
	  background-color: pink;
	}
	swiper-item:nth-child(2) .item{
	  background-color: red;
	}
	swiper-item:nth-child(3) .item{
	  background-color: gold;
	}

swiper当中常用的属性

  1. indicator-dots boolean false 是否显示面板指示点
  2. indicator-color color rgba(0, 0, 0,.3) 指示点颜色
  3. indicator-active-color color false 当前选中的指示点颜色
  4. autoplay boolean false 是否自动切换 interval number 5000 自动切换时间间隔
  5. circular boolean false 是否采用衔接滑动
  6. 属性名 indicator-dots
bash 复制代码
	<swiper class="swiper-container" 
	indicator-dots 
	indicator-color="#fff" 
	indicator-active-color="red" 
	autoplay interval="2000" 
	circular>
	  <swiper-item>
	    <view class="item">A</view>
	  </swiper-item>
	  <swiper-item>
	    <view class="item">B</view>
	  </swiper-item>
	  <swiper-item>
	    <view class="item">C</view>
	  </swiper-item>
	</swiper>

视频 发送弹幕

【发送弹幕效果】

先引入官方视频连接
http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023hy=SHfileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400

Xxx.wxml

bash 复制代码
	<!-- 弹幕小案例 -->
	<view>
	<!-- 视频 -->
	  <video
	  id="vi"
	  danmu-list="{{danmuList}}"
	  style="width: 100%;"
	  src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023hy=SHfileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"/>
	</view>
	<!-- 发送弹幕 -->
	<view style="border: 1rpx solid;">
	  <!-- model 双向绑定 -->
	  <input model:value="{{danmuVal}}" type="text"/>
	</view>
	<button bind:tap="sendDanmu">发送弹幕</button>

Xxx.js

bash 复制代码
Page({
  data:{
    danmuList:[
      // 颜色 时间 文本
      {color:'red',time:1,text:'第一个弹幕'}
    ],
    danmuVal:""
  },
  onReady(){
    // 创建video上下文
    this.videoContext = wx.createVideoContext('vi')
  },
  // 点击发送弹幕
  sendDanmu(){
    // 调用video上下文的sendDanmu方法
    this.videoContext.sendDanmu({
      text:this.data.danmuVal,
      color:'pink'
    })
  }
})
相关推荐
知攻善防实验室3 分钟前
Notepad++ 本地提权漏洞|复现|分析
测试工具·安全·网络安全·notepad++
Q_Q196328847522 分钟前
python+uniapp基于微信小程序的医院陪诊预约系统
开发语言·spring boot·python·微信小程序·django·flask·uni-app
2501_915909061 小时前
Python 爬虫 HTTPS 实战,requests httpx aiohttp 抓取技巧、证书问题与抓包调试全流程
爬虫·python·ios·小程序·https·uni-app·iphone
低代码布道师1 小时前
少儿舞蹈小程序(19)地址列表功能实现及默认地址逻辑
前端·低代码·小程序
00后程序员张4 小时前
iOS 开发环境搭建完整指南 Xcode 安装配置、iOS 开发工具选择、ipa 打包与 App Store 上架实战经验
android·macos·ios·小程序·uni-app·iphone·xcode
從南走到北8 小时前
JAVA露营基地预约户外露营预约下单系统小程序
java·开发语言·小程序
CChenhire8 小时前
乔拓云门店小程序快速搭建攻略
小程序
00后程序员张9 小时前
App 上架全流程指南,iOS 应用发布步骤、ipa 文件上传工具、TestFlight 分发与 App Store 审核经验分享
android·ios·小程序·https·uni-app·iphone·webview
说私域9 小时前
基于开源AI大模型AI智能名片S2B2C商城小程序的产地优势产品营销策略研究
人工智能·小程序·开源
说私域9 小时前
蒸汽机革命后工业生产方式的变革与AI智能名片S2B2C商城小程序的影响
大数据·人工智能·小程序