小程序自定义 scroll-view 滚动条

话不多说, 直接上效果图

效果图

wxml代码

 <scroll-view scroll-x 
  class="scroll-view" 
  bindscroll="bindScroll">
 <block wx:for="{{arr}}" wx:key="index">
 <view class="scroll-item">scroll-view{{index}}</view> 
 </block>
 </scroll-view>
 
 <!-- 滚动条 -->
 <view class="slide">
 <view class='slide-bar'>
 <view class="slide-action" 
  style="width:{{slideWidth}}rpx; margin-left:{{slideLeft<=1 ? 0 : slideLeft+'rpx'}};">
 </view>
 </view>
 </view>
 

wxss代码

 page{
 height: 100vh;
 background: rgb(111, 80, 65)
 }
 .scroll-view{
 display: flex;
 width: 100%;
 white-space: nowrap;
 padding-top: 20rpx;
 } 

 .scroll-item:nth-child(1){
 margin-left: 40rpx;
 } 

 .scroll-item {
 display: inline-block;
 width: 550rpx;
 height: 463rpx;
 background: rgba(199, 180, 165);
 border-radius: 20rpx;
 margin-right: 30rpx;
 color: #fff;
 } 

 .slide{
 background:rgb(111, 80, 65);
 width:100%;
 padding-top:20rpx;
 }
 .slide .slide-bar{
 width:180rpx;
 margin:0 auto;
 height: 4rpx;
 background: rgba(255,255,255,.2);
 } 

 .slide .slide-bar .slide-action{
 height:100%;
 background:#fff;
 } 

js代码

 /**
 * 页面的初始数据
 */
 data: {
 arr: 10,
 slideWidth: '',
 slideLeft: ''
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 // 计算比例
 this.calcRatio();
 },

 /**
 * 计算比例
 */
 calcRatio() {
 var windowWidth = wx.getSystemInfoSync().windowWidth;
 // 计算列表总长度
 var totalLength = (this.data.arr * 580) + 40;
 // 计算滑块的比例
 var slideRatio = 180 / totalLength * (750 / windowWidth);
 /**
 * 屏幕总长度 / 列表总长度 = 滑块占滚动条长度的比例
 * 滑块占滚动条长度的比例 * 滚动列表的长度 = 滑块的宽度
 */
 var sliderWidth = 750 / totalLength * 180;
 this.setData({
 slideWidth: sliderWidth,
 totalLength: totalLength,
 slideRatio: slideRatio
 })
 },

 /**
 * 监听滚动
 */
 bindScroll(e) {
 this.setData({
 slideLeft: e.detail.scrollLeft * this.data.slideRatio
 })
 },

附:scroll-view可滚动视图区域

总结

到此这篇关于微信小程序自定义scroll-view的文章就介绍到这了,更多相关微信小程序自定义scroll-view内容请搜索程序员的世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员的世界!

微信小程序自定义scroll-view的实例代码的更多相关文章

  1. 使用JS调用WebService接口

    <> $(document).ready(function () { var username = "admin"; var password = "123456";       /*==J......

  2. 原生js使用面向对象的方法开发选项卡实例教程

    本教程通过js面向对象的方法来封装一个选项卡的实例,在实例中讲解js的面向对象如何实现功能。一般封装好的选项卡程序,只需要一个div元素即可。其它元素都是通过json数据来生成,所以封装好的选项卡实例,调用非常方便。先创建一个div元素,如下所示:<div class="tab_bo......

  3. js面向对象封装级联下拉菜单列表

    本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素。点击文本框后,显示一级菜单。如果菜单中包含子菜单,菜单右侧会有指示箭头。点击菜单之后,会再显示下一级菜单,以此类推。当菜单下无子菜单时,选择菜单后会在文本框中显示。本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素。点击文本......

  4. 基于JS简单实现手持弹幕功能+文字抖动特效代码

    前段时间抖音上有个抖动弹幕挺火的,于是决定仿写一个,话不多说,先看效果…效果展示GIF图看着有点模糊,但实际效果还是不错的。第一眼看上去也不知道该咋做,那就先把要实现的功能拆解一下吧。生成一个铺满全屏的黑色背景,写上文字,然后内容居中实现无缝滚动实现文字抖动特效旋转90度(默认横屏展示)代码如下.h......

  5. JavaScript实现页面动态验证码的实现示例

    引言:现在很多在用户登陆或注册的时候为了防止程序攻击,加入了动态验证的技术,一般是让用户输入随即生成的验证码来实现。我自己写了一个没有跟后台交互的,就在前端验证,发出来给大家看看。效果图: 实现思路:把数字和字母放到一个数组中,通过随机的方式取得数组下标,总共取4个组成验证码;把验证码渲染出来(......

  6. JavaScript 防盗链的原理以及破解方法

    背景前段日子 在自学做项目的时候发现 明明在项目中引用了线上存在的图片 但是在自己的项目中却怎么也显示出来查阅资料后发现是这些第三方网站设置了防盗链破解防盗链先说说防盗链的原理,http 协议中,如果从一个网页跳到另一个网页,http 头字段里面会带个 Referer。这里的Referer是由于历史......

  7. jquery文本框内容改变事件

    /** * 内容改变时并不会触发事件,但是在失去焦点的时候会触发。*/$("#inputid").change(function(){ console.log($(this).val());});/** * 只要文本类容发生改变,就会触发该事件 */$("#inp......

  8. JavaScript canvas实现文字时钟

    本文实例为大家分享了canvas实现文字时钟的具体代码,供大家参考,具体内容如下 先看看效果图 代码 <!DOCTYPE html> <htmllang="en"> <head> <metacharset......

  9. JavaScript Html实现移动端红包雨功能页面

    本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码,供大家参考,具体内容如下实现效果如下:具体代码如下html部分:红包雨demo.css为初始化css,可以不加index.css部分body{width: 100%;height: 100%;background-image: url(/javascript/......

    ____
  10. ________
  11. javascript中的内存管理____

    目录简介内存生命周期JS中的垃圾回收器引用计数垃圾回收算法Mark-and-sweep回收算法调试内存问题闭包Closures中的内存泄露javascript中的内存管理简介在c语言中,我们需要手动分配和释放对象的内存,但是在java中,所有的内存管理都交给了java虚拟机,程序员不需要在手动进程内......

随机推荐

  1. MySQL创建数据库并支持中文字符的操作方法

    我们首先看一下MySQL官方文档:5.7CREATE {DATABASE | SCHEMA} [IF NOT EXISTS] db_name[create_option] ...create_option: [DEFAULT] {CHARACTER SET [=] charset_name| COL......

  2. Java多线程实现简易微信发红包的方法实例

    一、首先我们先大致了解一下什么是多线程。(书上的解释)程序是一段静态的代码,它是应用软件的蓝本。进程是程序的一次动态执行过程,对应了从代码加载执行,执行到执行完毕的一个完整的过程。线程不是进程,线程是比进程更小的执行单位,一个进程在其执行过程中,可以产生多个线程形成多条执行线索,每条线索即每个线程也......

  3. Latex安装教程(附美赛论文latex模板)

    @目录Latex简介安装步骤texlive下载配置环境变量配置Texsudiolatex版本helloworld美赛 latex模板Latex简介LaTeX(LATEX,音译“拉泰赫”)是一种基于ΤΕΧ的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在20世纪80......

  4. javascript 数组(list)添加/删除的实现

    javascript 数组Array(list)添加/删除unshift:将参数添加到原数组开头,并返回数组的长度pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefinedpush:将参数添加到原数组末尾,并返回数组的长度concat:返回一个新数组,是将参数添加到原数组中......

  5. CSS实现漂亮的时钟动画效果的实例代码

    我要找工作 !!! 预先准备: 首先这个动画,是根据之前的 Loading 动画制作的,Loading炫酷动画, 这些的思路都是一样的,在这个动画上进行了一次创新。 预习知识点: 动画帧 背景渐变 var() 和 calc() 的使用 flex布局的场景 多个动画操作 ......

  6. java实现给图片加铺满的网格式文字水印

    效果:原图加水印后的图片废话不多说,直接上代码代码:package com.example.demo;import java.awt.AlphaComposite;import java.awt.Color;import java.awt.Font;import java.awt.Graphics2......

  7. 基础篇-http协议《http 简介、url详解、request》

    目录一、http 简介二、url 详解三、request1.get 和 post2.请求方法3.request 组成4.请求头5.get 请求参数6.post 请求参数7.post 的 body一、http 简介http 协议包含request(你发过去的内容)和response(返回来的内容)。h......

  8. PHP实现大文件断点下载

    什么是断点续传下载?就是下载文件时,不必重头开始下载,而是从指定的位置继续下载,这样的功能就做断点续传下载。断点续传的理解可以分为两部分:一部分是断点,一部分是续传下载。断点的由来是在下载过程中,将一个下载文件分成了多个部分,同时进行多个部分一起的下载,当某个时间点,任务被暂停了或因网络原因断网、或......

  9. unity实现简单的贪吃蛇游戏

    本文实例为大家分享了unity实现简单贪吃蛇游戏的具体代码,供大家参考,具体内容如下SatUIController代码using UnityEngine;using UnityEngine.UI;public class StartUIController : MonoBehaviour{publi......

  10. 删除pandas中产生Unnamed:0列的操作

    我们在数据处理,往往不小心,pandas会“主动”加上行和列的名称,我现在就遇到了这个问题。这个是pandas中to_csv生成的数据各种拼接之后的最终数据(默认参数,index=True,column=True)Unnamed: 0 ip Unnamed: 0.1 ... 766 767 ......