微信小程序滚动播放内容

最新推荐文章于 2024-06-03 10:29:24 发布
最新推荐文章于 2024-06-03 10:29:24 发布
阅读量1.6k 收藏 8
点赞数 1
分类专栏： 从头搭建微信小程序 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58095675/article/details/121073047
版权

目录

微信小程序创建项目配置底部导航栏
微信小程序滚动播放内容
微信小程序功能中心模块开发
微信小程序个人中心页面开发
微信小程序获取电话号码
微信小程序显示列表数据
微信小程序显示分页列表
微信小程序添加插屏广告
微信小程序添加激励式广告

最终效果可扫码查看
可查看效果二维码
遇到问题可通过公众号留言反馈
留言扫描二维码

准备资料

本篇是从头搭建微信小程序的第二篇，主要内容：
1.纵向滚动播放内容，循环的
2.网络请求数据
3.流量主的banner广告插入
4.点击事件的弹窗提醒
其中，备用的数据有两部分，分别对应两个循环滚动的内容
http://yr.lootaa.com/ship/time/todayEnd 上半部分滚动内容
http://yr.lootaa.com/time/channel/lately 下半部分滚动内容
在这里插入图片描述
开发阶段需要先忽略域名合法性校验。点击开发者工具详情，勾选即可。
在这里插入图片描述

请求数据

在index.js文件中，data里面增加list和list2参数，分别用于存储两部分数据。
定义全局变量that，在onLoad方法中赋值that=this;
使用wx.request请求数据，将返回结果使用that.setData赋值上。
请求方式的微信官方地址为：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

Page({
  data: {
    list:[],
    list2:[],
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: false,
    vertical: true,
    autoplay: true,
    circular: true,
    interval: 2000,
    duration: 500,
    previousMargin: 0,
    nextMargin: 0
  },
  onLoad() {
      var that = this;
      wx.request({
		  url: 'http://yr.lootaa.com/ship/time/todayEnd',
		  success (res) {
		    that.setData({
		      list: res.data.data.data
		    })
		    console.log(res.data.data.data)
		  }
		})
		
		wx.request({
		  url: 'http://yr.lootaa.com/time/channel/lately',
		  success (res) {
		    that.setData({
		      list2: res.data.data
		    })
		    console.log(res.data.data)
		  }
		})
  }
  
})

纵向滚动播放

滚动播放的组件使用的swiper和swiper-item，例如轮播图等也是这个组件。官方提供了demo，可以通过https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html查看。本篇的纵向轮播也是在官方demo基础上进行的修改。

样式

复制样式weui.wxss，可以从demo中直接复制，或者从github下载：https://github.com/weui/weui-wxss
index.wxss的样式直接复制过来，有写修改后没有使用的，继续保留了没有删除，不影响业务。

@import "./weui.wxss";

page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}
.page-body{
  padding-top: 60rpx;
}
.page-section{
  width: 100%;
  margin-bottom: 60rpx;
}
.page-section_center{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-section:last-child{
  margin-bottom: 0;
}
.page-section-gap{
  box-sizing: border-box;
  padding: 0 30rpx;
}
.page-section-spacing{
  box-sizing: border-box;
  padding: 0 20rpx;
}
.page-section-title{
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.page-section-gap .page-section-title{
  padding-left: 0;
  padding-right: 0;
}

.demo-text-1{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #1AAD19;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-1:before{
  content: 'A';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-2{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #2782D7;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-2:before{
  content: 'B';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-3{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #F1F1F1;
  color: #353535;
  font-size: 36rpx;
}
.demo-text-3:before{
  content: 'C';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button{
  margin-bottom: 30rpx;
}
button:last-child{
  margin-bottom: 0;
}
.page-section-title{
  padding: 0;
}
.swiper-item{
  display: block;
  height: 150px;
}
.page-section-title{
  margin-top: 60rpx;
  position: relative;
}
.info{
  position: absolute;
  right: 0;
  color: #353535;
  font-size: 30rpx;
}
.page-foot{
  margin-top: 50rpx;
}

布局

demo中修改部分内容
1.swiper-item修改为自己要轮播的数据，三行的view内容
2.swiper增加属性display-multiple-items，表示一屏幕显示几条数据，此处使用的2
3.轮播的默认值修改，可以直接在swiper参数中调整，本篇直接修改的data内容

调整后的布局为

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <view bindtap="dingyue" style="padding-bottom: 5px; color: blue;">今日截关信息，点击订阅每日提醒</view>
      <swiper display-multiple-items="2"
        indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
        interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
        <block wx:for="{{list}}" wx:key="*this">
          <swiper-item>
            <view>船名：{{item.shipNameCn}}</view>
            <view>航次：{{item.voyage}}</view>
            <view>截关时间：{{item.endTime}}</view>
          </swiper-item>
        </block>
      </swiper>
    </view>

    <view class="page-section page-section-spacing swiper">
      <view style="padding-bottom: 5px; color: blue;">最近集装箱进出场时间查询</view>
      <swiper display-multiple-items="2"
        indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
        interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
        <block wx:for="{{list2}}" wx:key="*this">
          <swiper-item>
            <view>提单号：{{item.billNo}}</view>
            <view>箱号：{{item.boxNo}}</view>
            <view>出场时间：{{item.time}}</view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    
  </view>
</view>

至此，基本数据展示流程完成。

流量主的banner广告插入

如果小程序的用户大于1000人，则可以申请开通流量主，然后直接添加banner广告后，则可以直接复制banner内容。添加到对应布局即可。
添加上banner后的布局完成内容为

<view class="container">
  <ad unit-id="adunit-a797bfb98d2f529d"></ad>
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <view style="padding-bottom: 5px; color: blue;">今日截关信息，点击订阅每日提醒</view>
      <swiper display-multiple-items="2"
        indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
        interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
        <block wx:for="{{list}}" wx:key="*this">
          <swiper-item>
            <view>船名：{{item.shipNameCn}}</view>
            <view>航次：{{item.voyage}}</view>
            <view>截关时间：{{item.endTime}}</view>
          </swiper-item>
        </block>
      </swiper>
    </view>

    <view class="page-section page-section-spacing swiper">
      <view style="padding-bottom: 5px; color: blue;">最近集装箱进出场时间查询</view>
      <swiper display-multiple-items="2"
        indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
        interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
        <block wx:for="{{list2}}" wx:key="*this">
          <swiper-item>
            <view>提单号：{{item.billNo}}</view>
            <view>箱号：{{item.boxNo}}</view>
            <view>出场时间：{{item.time}}</view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    
  </view>
</view>

点击事件的弹窗提醒

点击第一个滚动播放标题，需要提醒是否确定订阅（没有实现真实逻辑，仅仅测试绑定功能），模拟了点击是和点击否的操作。
view中添加bindtap即可指定对应方法名称，所以整体分为两步：编写对应方法、bindtap指定方法。
index.js中添加dingyue方法，该方法实现了弹窗提醒功能。完成的index.js代码

Page({
  data: {
    list:[],
    list2:[],
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: false,
    vertical: true,
    autoplay: true,
    circular: true,
    interval: 2000,
    duration: 500,
    previousMargin: 0,
    nextMargin: 0
  },
  onLoad() {
      var that = this;
      wx.request({
        url: 'http://yr.lootaa.com/ship/time/todayEnd',
        success (res) {
          that.setData({
            list: res.data.data.data
          })
          console.log(res.data.data.data)
        }
      })
      
      wx.request({
        url: 'http://yr.lootaa.com/time/channel/lately',
        success (res) {
          that.setData({
            list2: res.data.data
          })
          console.log(res.data.data)
        }
      })
    },
  dingyue: function (e) {
    var mobile = wx.getStorageSync('mobile');
    var openid = wx.getStorageSync('openid');
    var unionid = wx.getStorageSync('unionid');
    if(!mobile && !openid && !unionid) {
      wx.showModal({
        title: '提示',
        content: '您尚未登录，是否进入登录页面？',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else {
            console.log('用户点击取消')
          }
        }
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '请确保您已关注了公众号“洛塔志达”，我们将以公众号消息的形式向您推送截关提醒。此次提醒将续期7天。',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else {
            console.log('用户点击取消')
          }
        }
      })
    }
    
  }
})

布局文件的view绑定该方法，代码为

<view class="container">
  <ad unit-id="adunit-a797bfb98d2f529d"></ad>
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <view bindtap="dingyue" style="padding-bottom: 5px; color: blue;">今日截关信息，点击订阅每日提醒</view>
      <swiper display-multiple-items="2"
        indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
        interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
        <block wx:for="{{list}}" wx:key="*this">
          <swiper-item>
            <view>船名：{{item.shipNameCn}}</view>
            <view>航次：{{item.voyage}}</view>
            <view>截关时间：{{item.endTime}}</view>
          </swiper-item>
        </block>
      </swiper>
    </view>

    <view class="page-section page-section-spacing swiper">
      <view style="padding-bottom: 5px; color: blue;">最近集装箱进出场时间查询</view>
      <swiper display-multiple-items="2"
        indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
        interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
        <block wx:for="{{list2}}" wx:key="*this">
          <swiper-item>
            <view>提单号：{{item.billNo}}</view>
            <view>箱号：{{item.boxNo}}</view>
            <view>出场时间：{{item.time}}</view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    
  </view>
</view>

点击后的效果
在这里插入图片描述

lootaa
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
小程序文字循环滚动动画（完美解决）
tongtongsong的博客
06-11 2384
解决问题： 1、文字循环播放特效 2、小程序退出、隐藏后台动画停止（已解决）
音视频播放对应文字同步高亮且滚动到指定位置(scrollTop)
younger_z的专栏
07-01 1022
需求 播放音频或者视频，对应文字高亮展示以及滚动到该位置，红色方框是一个scroll 数据 代码 <div class="col-sm-12 float-none new-content" height="652"> //some infos <input type="hidden" paraid="1" idindex="2" starttime...
微信小程序播放音乐并同步一次显示一行歌词
qq_45803593的博客
02-25 8061
主要是对于歌词部分的描述，先在加载页面时异步获取歌词，对歌词进行切分并以对象的形式放入数组中，将每个时间段获得的歌词存起来方便页面渲染，判定该显示那句歌词。将歌词数组进行遍历，如果当前歌曲播放时间等于歌词数组中歌词的时间，就将当前歌词换为这一句;这样当改到下一句时就会等到上一句完全唱完再进行切换。.........
微信小程序毕业设计-音乐播放器系统项目开发实战(附源码+论文)
2301_77929081的博客
06-03 587
本系统分为用户和管理员两个角色，用户的操作主要为微信端，管理员的操作为服务端。管理员可以管理歌曲信息、用户信息、会员优惠信息以及会员办理和会员信息等。用户和管理员的功能相互串连形成完整的基于微信小程序的音乐播放器。
微信小程序上实现滚动播放等视频相关的效果
08-10
微信小程序上实现滚动播放等视频相关的效果
微信小程序 音乐播放代码(播放方式，歌词滚动) （更新优化版：添加文字颜色过渡）
PrimaryColor
08-21 6538
效果图： wxml： <view class="container flex-align"> <view style="text-align:center;position:relative;" class="box"> <view style="color:white;">{{songs.name}}</view> <view style="color:#ddd;" class="f12">{{songs.ar[0].name}}&l
微信小程序——文字水平循环滚动
qq_43852612的博客
06-29 2469
微信小程序中实现一个文字水平循环移动
微信小程序实现自上而下字幕滚动
12-29
本文实例为大家分享了微信小程序实现字幕滚动的具体代码，供大家参考，具体内容如下 需求： 实现框内的文字自下而上的自动循环滚动。 解决方案： 第一种方法： 经查询，最一开始实现字幕滚动是使用的微信小程序的swiper组件，后来发现，使用swiper组件实现的效果类似于轮播图，不符合需求。 <swiper class=swiper_container vertical=true autoplay=true circular=true interval=2000> <view class='list'> <view wx:for={{List}} wx:key=i
微信小程序实现循环动画效果
12-09
在微信小程序的交互效果中，通常通过各种动画效果来增强用户体验，本文通过微信小程序原生API来实现小程序中控件的各种动画效果，先看下本文最终的效果：    上图中的“关注公众号”动画就是我们要实现的效果。  为了实现上文中的效果，我们首先来看一下微信小程序关于动画的官方API 微信官方API学习 wx.createAnimation(OBJECT) 说明：创建一个动画实例animation。调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。最后通过动画实例的export方法导出动画数
小程序搜索词条单个轮播停留展示、信息栏多个词条循环滚动展示
weixin_45463061的博客
11-26 815
搜索词条的单个轮播停留展示没什么难度，直接看小程序官方的swiper组件的示例代码能读懂；信息栏多个词条滚动不停展示需要用一个swiper组件包裹两个相同的swiper-item元素来进行无缝轮播展示，这时候就需要做一点处理了，需要一些处理，处理说明写在代码里了。
微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放 小程序自定义音频组件，带滚动条
bill的博客
11-15 2714
1,app,json里面配置 “requiredBackgroundModes”: [ “audio”, “location” ], 2，app.js里面配置 globalData: { userInfo: null, global_bac_audio_manager: { manage: wx.getBackgroundAudioManager(), is_play: false, id: ‘...
仿直播小程序
12-11
仿直播小程序，简单整合了一下，想要做小程序的，可以做个入门的参考
微信小程序文字循环滚动
明知山
03-31 1919
<view class="marquee"> <view class="main" style="transform: translateX({{move}}px);"> 种一颗树最好的时间是十年前，其次是现在 </view> </view> .marquee { position: relative; width: 100%; height: 50rpx; line-height: 50rpx; white-space: no.
微信小程序页面无限滚动流
听风看海的博客
04-29 5548
场景 当前的小程序非常火，开发起来也很快，框架很多，今天讲下mpvue这个框架实现页面无限滚动流，滚动到底加载新数据。 问题 微信小程序不支持Dom, 那么要实现一个无限的滚动效果那不是蛋疼？ mpvue+scroll-view实现 mpvue这个是美团开源的一个框架， 语法是和vue99%相似，但是坑很多，如果你遇到可以看下我的mpvue的其他文章，里面详细的讲了哪些坑以及解决办法。 scrol...
微信小程序-scroll-view滚动到指定位置（楼梯效果）和循环嵌套加载数据
你好！刘斩仙
07-25 8847
效果如图： 代码如下： wxml//使用循环嵌套data数据格式写对即可 <scroll-view class="left" scroll-y> <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}" bindtap="tap"> {{item.tx
实现微信小程序无限滚动的自定义Picker组件
weixin_45228257的博客
07-13 1342
公司需要实现一个无限滚动和自定义的picker组件，自己抱着试试看的心态去写了，反正给的时间充足，后面发现scroll-view只有bindscroll方法，竟然没有scrollstart和scrollend方法，没办法我就把本来是固定的选中状态，变成的随着currentSelectIndex改变，体验可能有所影响，但是总体看来还不错=。= 这是wxml代码： 其中currentSelectIndex表示当前选中item的index。当等于currentSelectIndex时，item的类名为bigge
【微信小程序】picker滚动选择器(85/100）
lichong951的专栏
07-19 548
简单的点胜过复杂的高明
微信小程序展示不定长菜单项轮播滑动
苏苏就是小苏苏的博客
05-27 1360
1.实现效果 2.实现原理 swiper组件： indicator-dots面板指示点，可更改原生组件的样式（若有更复杂样式，可自定义指示点），当只有一页数据的时候不展示该指示点，判断数组长度，动态修改值。 autoplay：是否自动轮播。 bindanimationfinish：动画结束时会触发 animationfinish 事件，结合e.detail.source，避免抖动效果。 current：当前所在滑块的 index。（自定义指示点可用于获取指示点所在位置） 数组拆分 设置当前轮
小程序轮播滑动实现产品类型左右滑动分页
chaosama的博客
11-12 422
wxml <view class="service-class"> <swiper class="swiper-view" indicator-dots="true"> <block wx:for="{{servicesInfo}}" wx:key="{{servicesInfo}}" data-index="{{ind...
微信小程序滚动条始终展示
最新发布
06-29
在微信小程序中，要始终保持滚动条可见，你可以使用 `scroll-view` 组件的 `scroll-y` 属性设置为 `true`，这样它会在内容可滚动时显示滚动条。同时，如果你想在任何时候都看到滚动条，无论内容是否滚动，你可以在样式表（global.css）中自定义滚动条样式，添加 `::-webkit-scrollbar` 和 `::-webkit-scrollbar-thumb` 伪类。 以下是一个简单的示例： ```html <scroll-view class="scroll-view-custom" scroll-y="true"> <!-- 你的内容 --> </scroll-view> <style scoped> .scroll-view-custom { /* 自定义滚动条样式 */ -webkit-overflow-scrolling: touch; ::-webkit-scrollbar { width: 6px; /* 滚动条宽度 */ } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.5); /* 滚动条颜色 */ border-radius: 3px; /* 边角圆润 */ } /* 如果你想让滚动条始终显示在顶部，可以使用以下样式 */ ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.8); } } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lootaa

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值