小程序模板網

微信小程序-scroll-view滾動到指定位置（類似錨點）

發(fā)布時間：2018-04-08 11:43 所屬欄目：小程序開發(fā)教程
本文作者：莫蘭迪不會沒有瓶子，來自原文地址

先來說一下官網例子吧 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. 
	





            


            


            

            

                
                

                    本文地址：http://22321a.com/wxmini/doc/course/23148.html 復制鏈接 
                    如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點擊咨詢 
                

            

          

          

        

      

      
    

  







  

    
  









  
  

    
    
    

    

     QQ在線咨詢