微信小程序实现滚动条功能

本文实例为大家分享了微信小程序实现滚动条的具体代码，供大家参考，具体内容如下

view

<view class="conty">
  <!-- 滚动字幕 -->
<scroll-view class="container">
  <view class="scrolltxt">
    <view class="marquee_box">
      <view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)">
      <text>{{text}}</text>
      <text style="margin-right:{{marquee_margin}}px;"></text>
      <text style="margin-right:{{marquee_margin}}px;">{{text}}</text>  
      </view>
    </view>
  </view>
</scroll-view>
</view>

js

data: {
  text: "这是一条农协动态，请您仔细阅读，若内容有所问题，请联系客服！",
  marqueePace: 1,//滚动速度
  marqueeDistance: 0,//初始滚动距离
  marquee_margin: 30,
  size:14,
  interval: 20 ,// 时间间隔
  HomeIndex:0,
  },
 onShow: function () {
  var that = this;
  var length = that.data.text.length * that.data.size;//文字长度
  var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
  //console.log(length,windowWidth);
  that.setData({
   length: length,
   windowWidth: windowWidth
  });
  that.scrolltxt();// 第一个字消失后立即从右边出现
  },
   
  scrolltxt: function () {
  var that = this;
  var length = that.data.length;//滚动文字的宽度
  var windowWidth = that.data.windowWidth;//屏幕宽度
  if (length > windowWidth){
   var interval = setInterval(function () {
   var maxscrollwidth = length + that.data.marquee_margin;//滚动的最大宽度，文字宽度+间距，如果需要一行文字滚完后再显示第二行可以修改marquee_margin值等于windowWidth即可
   var crentleft = that.data.marqueeDistance;
   if (crentleft < maxscrollwidth) {//判断是否滚动到最大宽度
    that.setData({
    marqueeDistance: crentleft + that.data.marqueePace
    })
   }
   else {
    //console.log("替换");
    that.setData({
    marqueeDistance: 0 // 直接重新滚动
    });
    clearInterval(interval);
    that.scrolltxt();
   }
   }, that.data.interval);
  }
  else{
   that.setData({ marquee_margin:"1000"});//只显示一条不滚动右边间距加大，防止重复显示
  } 
  }

css

.scrolltxt{
  width: 100%;
  padding:0 20rpx;
  background:#2a4d69;
}
.marquee_box {
  position:relative;
  color:white;
  height:90rpx;display:
  block;overflow:hidden;
} 
.marquee_text {
  white-space: nowrap;
  position:absolute;
  top:0;
  font-size:14px;
  height:90rpx;
  line-height:90rpx;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序scroll-view仿拼多多横向滑动滚动条

    本文实例为大家分享了微信小程序横向滑动滚动条的具体代码,供大家参考,具体内容如下 效果图 实现代码 index.wxml <scroll-view scroll-x="true" class="scroll-view-x" style="padding-top:10rpx" scroll-with-animation="true" wx:if="{{tlist[currentTab].secondList}}&

  • 微信小程序-横向滑动scroll-view隐藏滚动条

    wxml <scroll-view class="recommend_scroll_x_box" scroll-x="true"> <view class="recommend_hot_box" wx:for="{{hotList}}"> <image src="{{item.pic}}" class="recommend_hot_image"><

  • 微信小程序scroll-view隐藏滚动条的方法详解

    效果图: 1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示: 2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果的: 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排: 4.包裹 scroll-view 的元素要加上样式–> overflow:hidden;white-space:nowrap; 5.有时候为了美观要隐藏滚动条,需要在样式里加上 核心代码: 在w

  • 微信小程序 scroll-view隐藏滚动条详解

    微信小程序 scroll-view隐藏滚动条详解

    一:scroll-view隐藏滚动条 在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js 最终显示效果如下; 注意: (1)不能在scroll-view中使用textarea,mao,canvas,video组件 (2)scroll-init-view的优先级高于scroll-top (3)onPullDownRefresh事

  • 微信小程序scroll-view的滚动条设置实现

    小程序的scroll-view用的比较多了,列表页一般也没管它的滚动条,最近突然发现在android与ios中横向滑动的时候表现不一样.不一样在哪呢,ios上直接就不显示啊,也是没谁了.深入想了一下,这滚动条能不能换一颜色或者换个样式.有这冲动就立马着手改. 1.直接打开官方demo,仔细看了一遍官方文档,没有任何说明,这是官方文档的一贯作风.没有一个属性是去控制显示/隐藏滚动条,更别说这样式.所以文档是指望不上了. 2.既然是组件,那就是css来控制的.又去看一下css中的scroll的介绍,

  • 微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例

    微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例

    本文实例讲述了微信小程序实现swiper切换卡内嵌滚动条不显示的方法.分享给大家供大家参考,具体如下: index.wxml文件: <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">为你推荐</view&g

  • 微信小程序设置滚动条过程详解

    微信小程序设置滚动条过程详解

    原因 原来在app.wxss中定义了如下的内容[不知道是不是新建项目自动生成的,这里也就提供了隐藏滚动条的思路啦] ::-webkit-scrollbar { width: 0px; height: 0px; color:#transparent; } what, 宽高为0,而且还是透明的,难怪,好吧,修改宽高4px,color设置为green,以为可以了,呵呵,太年轻. scroll-viwe依然没有滚动条,以为是布局原因,导致滚动条消失在界面外,我将宽高设为20px,想想也是搞笑,设这么宽,

  • 详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

    一.实践踩坑 项目使用mpvue开发 1. scroll-view默认是不滚动的..所以要先设置scroll-x="true"或者scroll-y="true" 2. 在scroll-view里面添加定宽元素,超过scroll-view宽度(设置了100%,即屏幕宽度)后,它竟然换行了.所以要scroll-view的样式要这样设置: scroll-view { width: 100%; white-space: nowrap; // 不让它换行 } 3. 然后在定宽

  • 微信小程序实现滚动条功能

    微信小程序实现滚动条功能

    本文实例为大家分享了微信小程序实现滚动条的具体代码,供大家参考,具体内容如下 view <view class="conty">   <!-- 滚动字幕 --> <scroll-view class="container">   <view class="scrolltxt">     <view class="marquee_box">       <view

  • 微信小程序 在线支付功能的实现

    微信小程序 在线支付功能的实现

    微信小程序 在线支付功能 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙,下面我就具体说一下小程序里微信支付的开发流程和注意点. 1.开通微信支付和微信商户号 这个过程就和开通服务号的微信支付过程一样,没有什么可以说的. 2.获得用户的openid 首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可

  • 微信小程序 五星评价功能的实现

    微信小程序 五星评价功能的实现

    微信小程序 五星评价功能 话不多说,我们来看一下效果图: 要实现的效果:点击到第几颗星,就要显示到第几颗星, 接下来直接查看源码: <view class="l-evalbox row"> <text class="l-evaltxt">满意度:</text> <view class="l-evalist flex-1" bindtap="chooseicon"> <ico

  • Android中微信小程序支付倒计时功能

    Android中微信小程序支付倒计时功能

    看效果 由于web 经验弱爆- -  一开始我的思路是找事件,但是看了半天API 基本都是点击触摸,通过物理触发- - 我居然忽略了生命周期,生命周期+线程不就完全OK吗- 事实证明,线程还是王道啊,一开始就应该这么搞嘛- 度娘上面也看了很多都是用js写的,but,可能刚做没几天吧,我对js与微信小程序掌握还不够熟练 思路: onLoad:function(options)调用倒计时方法函数 定义线程进行数据动态现实 1. 日期转化成毫秒 2.定义线程动态显示 3.渲染倒计时 1.毫秒转成固定格

  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图 首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷

  • 微信小程序显示下拉列表功能【附源码下载】

    微信小程序显示下拉列表功能【附源码下载】

    本文实例讲述了微信小程序显示下拉列表功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 app.json文件: { "pages":[ "views/views", "views/navigators/navigator1/navigator1", "views/navigators/navigator2/navigator2", "views/navigators/navigator3/naviga

  • 微信小程序实现日历功能

    微信小程序实现日历功能

    本文实例为大家分享了微信小程序实现日历功能的具体代码,供大家参考,具体内容如下 效果图: 代码: <view class="calendar"> <view class="selectDate"> <view class="goleft iconfont icon-jianzuo" bindtap="prevMonth"></view> <view class="

  • 微信小程序显示倒计时功能示例【测试可用】

    微信小程序显示倒计时功能示例【测试可用】

    本文实例讲述了微信小程序显示倒计时功能.分享给大家供大家参考,具体如下: 微信小程序中显示倒计时: index.wxml: <view class='countdown'>剩:<text style='color:#6B4EFD'> {{countDownDay}} </text> 天 <text style='color:#6B4EFD'>{{countDownHour}} </text> <text style='color:#6B4E

  • 微信小程序手机号码验证功能的实例代码

    wxml <form bindsubmit='formSubmit'> <view class='all'> <text>手机号:</text> <input name="phone" placeholder='请输入手机号' type='number' style='color:#333' placeholder-style="color:#666" maxlength="11" bindi

  • 微信小程序实现签到功能

    本文实例为大家分享了微信小程序实现签到功能的具体代码,供大家参考,具体内容如下 效果图: 今天是16号,所以显示已签到,渲染页面时请求后台传的参数为这月签到的日期 如:["16", "14"] 点击签到执行 calendarSign sign.wxml <!--index.wxml--> <view class="calendar"> <view class='bcfff'> <view class=&q

随机推荐