小程序横向scroll-view组件自动滚动到某个view

先看下效果

scroll-view一般用于做横向侧滑动栏目,分类等等，在这里我用改组件做时间分栏。

wxml部分

<view class="scroll_box"><scroll-view class="scroll-view_x" scroll-x='true' scroll-into-view="{{toview}}" scroll-with-animation="true" scroll-left="{{scrollLeftSys}}"><view class="item_list" class="{{item.isChoose?'choosed':'not_choose'}}" wx:for="{{classData}}" wx:key='key' id='{{item.id}}' data-index="{{index}}" bindtap='switchType'><text>{{item.time}}</text><text>{{item.desc}}</text></view></scroll-view>
</view>

scroll-view中属性scroll-x/scroll-y声明该控件的滑动方向,属性scroll-into-view='target'为自定滚动到携带目标id='target'某个元素,scroll-left属性为滚动条左边距离,scroll-with-animation:滚动条时滚动动画，属性值为布尔值，具体文档详见；

小程序scroll-view组件

scroll-view样式

.scroll_box .scroll-view_x {width: 100%;white-space: nowrap;height: 4rem;overflow: hidden;
}

item的样式

.choosed {width: 20%;padding: 0.8rem 6.5%;font-size: 0.8rem;color: white;display: inline-block;white-space: nowrap;background-color: #fe4a65;
}.not_choose {width: 20%;padding: 0.8rem 6.5%;font-size: 0.8rem;color: white;display: inline-block;white-space: nowrap;background-color: black;
}.choosed text, .not_choose text {display: block;width: 100%;font-size: 0.8rem;text-align: center;
}

page对象data属性中的classData

再处理完数据之后，需要更新一次page对象中的data，

 that.setData({toview: 'target'})

至此，这个功能就完成了。

小程序横向scroll-view组件自动滚动到某个view相关推荐

微信小程序横向(scroll x)滚动 scroll view
scroll-view 可滚动视图区域. scroll-x="true"
小程序横向滑块内边距问题
小程序横向滑块内边距与滚动问题描述:如下图,想封装热门歌单的横向可滚动视图区域.但是遇到了内边距问题.再用flex布局时,无论怎样设置,第一个或者最后一个滑块总是缺少内边距.本人推测应该是小程序的兼 ...
微信小程序常用视图容器组件
微信小程序常用视图容器组件 1.组件概述 2.常用的试图容器组件 2.1 view 2.1.1 案例 2.2 scroll-view 2.2.1 案例 2.3 swiper 2.3.1 案例 1.组件 ...
html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
微信小程序10：WXML 组件- 轮播图 swiper
微信小程序10:WXML 组件- 轮播图 swiper 官网地址https://developers.weixin.qq.com/miniprogram/dev/component/swiper.ht ...
微信小程序入门之常用组件(04)
常见组件重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等一.vi ...
微信小程序 - 进阶（自定义组件、promis化、mobx、分包、自定义tabBar）
文章目录一.自定义组件 1.创建组件 2.引用组件 3.组件和页面区别 4.组件样式 5.data.methods.properties 6.小程序的 data 和 properties 区别 7. ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...

小程序横向scroll-view组件自动滚动到某个view

小程序横向scroll-view组件自动滚动到某个view相关推荐

最新文章

热门文章