- N +

uni-app实现导航列表激活文字效果的切换

原标题:uni-app实现导航列表激活文字效果的切换

导读:

效果图如下:(git图来自https://www.jb51.net/article/130985.htm)HTML代码:<!--scroll-view 实现滚动...

文章目录 [+]

效果图如下:(git图来自https://www.jb51.net/article/130985.htm

20171219164017769.gif

HTML代码:

<!--scroll-view 实现滚动效果 scroll-x="true" 代表实现横向滚动 -->
<scroll-view scroll-x="true" >
    <view class="navContent">
        <view :class="{navContent_item:changeRed  == index}" v-for="(item,index) in navContent" :key="index" @click="changeIndex(index)">{{item}}</view>
    </view>
</scroll-view>

js代码:

<script>
    export default {
	data() {
	    return {
		navContent:['首页','组件','api','正义','我们'],
		changeRed: 0

		};
	},
	methods:{
	    changeIndex(index){
	        this.changeRed = index;
	    },
	}
		
    }
</script>

css代码:

.navContent{
	display: flex;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	padding: 30rpx;
	justify-content: space-between;
	width: 200%;
}
.navContent_item{
    color: #0e81ff;
}


有好的文章希望我们帮助分享和推广,猛戳这里我要投稿

0

0
返回列表
上一篇:
下一篇:

发表评论中国互联网举报中心

快捷回复:

验证码

    评论列表 (暂无评论,共78人参与)参与讨论

    还没有评论,来说两句吧...