小程序模板网

首页 小程序模板网 开发文档 小程序开发教程正文

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

发布时间：2018-04-08 11:43 所属栏目：小程序开发教程
本文作者：莫兰迪不会没有瓶子，来自原文地址

先来说一下官网例子吧 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. 
			
  2. 
				<view class="brand" wx:for="{{brandList}}">
    3. 
			
  3. 
				<view class="line"></view>
    4. 
			
  4. 
				<view id="{{item.wordindex}}" class="wordindex">{{item.wordindex}}</view>
    5. 
			
  5. 
				<view class="line"></view>
    6. 
			
  6. 
				<view class="brand_block">
    7. 
			
  7. 
				<view class="color_view" wx:for="{{item.brand}}" bindtap="click">
    8. 
			
  8. 
				<image src="{{item.brandimg}}"></image>
    9. 
			
  9. 
				</view>
    10. 
			
  10. 
				</view>
    11. 
			
  11. 
				</view>
    12. 
			
  12. 
				</scroll-view>
    13. 
			
  13. 
				<view class="index">
    14. 
			
  14. 
				<text wx:for="{{wordindex}}" bindtap="choiceWordindex" data-wordindex="{{item.wordindex}}">
    15. 
			
  15. 
				{{item.wordindex}}
    16. 
			
  16. 
				</text>
    17. 
			
  17. 
				</view>
    18. 
		

		wxjs

	

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





            


            


            

            

                

                    易优小程序（企业版）+灵活api+前后代码开源
                    码云仓库:starfork
                

                

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

            

          

          

            
            

            
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

          

          


        

      

      

        

          

                        

              

                

                  
                  
                

              

                        

                      

          

            
            

              
              
            

          

        

      

    

  







  

    

            

        
产品

        
      

            

        
服务

        
      

            

        
帮助

        
      

            

        
关于

        
      

            
   
        
工作日 8:30-12:00 14:30-18:00 

          周六及部分节假日提供值班服务

        联系我们 

    

  









  
  

    
    
    

    

     QQ在线咨询