微信小程序实现锚点效果 scroll-view的scroll-into-view属性

小程序中实现锚点效果，可以直接使用scroll-view的scroll-into-view属性就可以实现锚点效果，比较方便简单。那么需要用到scroll-view那些参数呢，下面具体讲讲：

scroll-x | scroll-y：设置滚动刚想
scroll-into-view：子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素。
scroll-with-animation：设置滚动条位置时使用动画过渡

效果展示：

wxml

<view class="fixed"><block wx:for="{{4}}" wx:key="index"><view class="bg{{index}}" data-index="{{index}}" bindtap="getViewId">内容</view></block>
</view>
<scroll-view scroll-y class="scroll" scroll-into-view="{{viewid}}" scroll-with-animation><block wx:for="{{4}}" wx:key="index"><view id="cont{{index}}" class="bg{{index}}">内容</view></block>
</scroll-view>

注意： viewid值是动态的，通过setData设置即可。

Page({data: {viewid: ""},getViewId(e) {this.setData({viewid: "cont" + e.currentTarget.dataset.index})}
})

wxss

page {font-size: 28rpx;text-align: center;
}.bg0 {background: #CCCC99;
}.bg1 {background: #CC9966;
}.bg2 {background: #666666;
}.bg3 {background: #CC9999;
}.fixed {border: 3rpx solid #eee;width: 100rpx;line-height: 100rpx;position: fixed;bottom: 10%;right: 0;z-index: 1;
}.fixed view {width: 100rpx;
}.scroll {height: 100vh;
}.scroll view {width: 100%;height: 1000rpx;
}

微信小程序实现锚点效果 scroll-view的scroll-into-view属性相关推荐

微信小程序实现锚点跳转
微信小程序实现锚点跳转 1.先上效果图,看看是不是你想要的. 2.主要用到的微信小程序的scroll-view 组件实现该效果.核心主要是使用scroll-into-view属性跳转对应的标签页和标签 ...
微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...
php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 {{notice}} x data: ...
微信小程序心形点赞效果
微信小程序心形点赞效果前言准备实现原理布局样式逻辑实现尾巴前言之前写过一篇文章微信小程序Canvas绘图API,简单介绍了下微信小程序(下面统称小程序)Canvas绘图相关API的 ...
微信小程序实现点赞气泡效果
微信小程序实现点赞气泡效果先上代码: <view class="listImg"><block wx:for="{{8}}" wx:key= ...
ar 微信小程序_微信小程序可以实现AR效果了
微信小程序可以实现AR效果了金羊网作者:马化展 2019-07-08 金羊网讯记者马化展报道:7月5日,微信宣布微信小程序可实现AR效果了.同日,首个小程序AR动态试妆的美妆品牌小程序正式落 ...
微信小程序实现星星评价效果
这篇文章主要为大家详细介绍了微信小程序实现星星评价效果,支持多个条目评价,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序实现星星评价效果的具体代码,供大家参考,具体内 ...
微信小程序实现星星评分效果
微信小程序实现星星评分效果思路很简单,小星星都是一张张独立的图片,点击的时候改变图片的路径就可以了. 我是用背景图片做的,先给盒子设置背景图片为灰色的小星星,盒子是根据js文件中的stars数组循环 ...

微信小程序实现锚点效果 scroll-view的scroll-into-view属性

微信小程序实现锚点效果 scroll-view的scroll-into-view属性相关推荐

最新文章

热门文章