uniapp实现自定义滚动条。

曾经终败给现在 2021-07-26 01:23 1177阅读 0赞

**uniapp实现自定义滚动条。**  
笔记重点：需要给每个text绑定一个id,但是id不能是数字开头，所以在前面加一个s或者其他字母。然后scroll-into-view定位到“sscurrent”，当sscurrent=ssindex,scroll会自动定位过去  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p0cHl0aG9uNjY2_size_16_color_FFFFFF_t_70]

<template>
    	<view>
    		<scroll-view :scroll-into-view="'ss'+current" scroll-x="true" style="background-color: #007AFF;padding-top: 20px;">
    			<view class="tabs">
    				<text :id="'ss'+index" @click="chooseTab(index)" :class="{cur:current==index}" v-for="(item,index) in tabs" :key="index">{ { item}}</text>
    			</view>
    		</scroll-view>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				tabs:['百姓商城','网易新闻','穿搭推荐','待定','待定','待定','待定'],
    			    current:0
    			}
    		},
    		methods: { 
    			chooseTab(index){ 
    				console.log(index)
    				this.current=index
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
      .tabs{ 
    	  display: flex;
    	  text{ 
    		  padding: 10px;
    		  white-space: nowrap;
    		  color: white;
    	  }
    	  .cur{ 
    		  color: orange;
    		  border-bottom: 2px solid orange;
    		  font-weight: bold;
    	  }
      }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p0cHl0aG9uNjY2_size_16_color_FFFFFF_t_70]: /images/20210725/8f907dd7b0014e8c96fd6b56e91baafd.png