小程序模板网

微信小程序-scroll-view滚动到指定位置(类似锚点)

本文作者:莫兰迪不会没有瓶子,来自原文地址

先来说一下官网例子吧 API 自己看咯

 

 https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122


有很多的注意事项,如果你不注意,滚动效果真的真的粗不来~~

  1. html中
    1. scroll-view竖向滚动必须设置scroll-y="true" style="height: 200rpx;"  必须..
    2. style="height: 200rpx;" 必须为200rpx/200px 不能用百分号
  2. js中
    1.  "toView","scrollTop"必须设置值
    2. "scrollTop": 0,必须为数值
         

主要用到scroll-into-view  如果你想让他回顶部 直接用scroll-top即可

话不多说,看代码

wxml


		
  1. <scroll-view scroll-y="true" scroll-into-view="{{toView}}">
  2. <view class="brand" wx:for="{{brandList}}">
  3. <view class="line"></view>
  4. <view id="{{item.wordindex}}" class="wordindex">{{item.wordindex}}</view>
  5. <view class="line"></view>
  6. <view class="brand_block">
  7. <view class="color_view" wx:for="{{item.brand}}" bindtap="click">
  8. <image src="{{item.brandimg}}"></image>
  9. </view>
  10. </view>
  11. </view>
  12. </scroll-view>
  13. <view class="index">
  14. <text wx:for="{{wordindex}}" bindtap="choiceWordindex" data-wordindex="{{item.wordindex}}">
  15. {{item.wordindex}}
  16. </text>
  17. </view>
wxjs

	
  1. // pages/order/car/add_car/car_brand/car_brand.js
  2. var app = getApp()
  3. Page({
  4. data: {
  5. "brandList": [],
  6. "wordindex": [],
  7. "toView": '#',
  8.  
  9. },
  10. onLoad: function (options) {
  11. var that = this;
  12. // 页面初始化 options为页面跳转所带来的参数
  13. app.func.req('getCarBrand?cx=1', function (res) {
  14. if (res.data.result == 'false') {
  15. console.log('false');
  16. that.wetoast.toast({
  17. title: res.data.msg,
  18. duration:


本文地址:https://www.eyoucms.com/wxmini/doc/course/23148.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询