分类：微信小程序滚动

2021
03-17

微信小程序实现多行文字滚动效果

本文实例为大家分享了微信小程序实现多行文字滚动的具体代码，供大家参考，具体内容如下wxml<viewclass="full"style="height:100%;overflow:hidden"><swiperautoplay="true"interval="3000"duration="500"circular="true"vertical="true"style="height:100%"><swiper-itemwx:for="{{topnewslist}}"wx:key="{{index}}"catchtouchmove='catchTouchMove'><van-notice-barscrollable="{{false}}"bindtap="ton... 继续阅读 >

2021
03-17

微信小程序实现水平垂直滚动

本文实例为大家分享了微信小程序实现水平垂直滚动的具体代码，供大家参考，具体内容如下要点swiper内部套scroll-view注意：1.scroll竖直滚动高度不能给百分比要给px/rpx2.swiper内部itemposiiton定位高度100%3.swiper高度要给定值4.如果横向滚动也要给水平的宽度代码xml<swiperclass="tab-box"current="{{currentTab}}"duration="300"bindchange="switchTab"><swiper-itemclass="tab-content"><scroll-viewclass="scroll-... 继续阅读 >

2020
10-08

微信小程序实现列表的横向滑动方式

微信小程序原生方式实现列表的横向滑动的两种方法：效果图：方式一：简单样式实现父元素设置：white-space:nowrap;//不换行overflow-x:auto;子元素设置：display:inline-block;方式二：scroll-view标签+样式scroll-view的横向滚动：scroll-view的内层view元素需要：display：inline-block;scroll-view的外层元素需要：white-space:nowrap;实现代码：1.wxml<!--pages/packageA//multiple-function/multiple-function.wxml--... 继续阅读 >

2020
09-24

微信小程序点击item使之滚动到屏幕中间位置

1.需求想做类似猫眼电影选场次会自动滚动到屏幕中间的效果如图是最终效果 2.分析实现这种效果的方法有三种：1.直接使用原生CSS+js;2.使用swiper,一屏显示多个item,点击item会自动滚动到中间3.使用微信的scroll-view配合JS实现权衡了一下最终选择了第三个方案，比较是微信自带的方法，使用起来会比较流畅，swiper的话会比较臃肿，原生的话就比较麻烦，需要考虑的兼容问题比较多。3.代码wxml<viewclass="items-box"><scroll-... 继续阅读 >