uview-plus 分段器使用

网络部-陈泽宇

已于 2023-08-14 17:42:37 修改

阅读量1.7k

点赞数

文章标签： windows linux 服务器

于 2023-08-14 17:01:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_60941411/article/details/132272832

版权

本文介绍了如何使用分段器u-subsection实现内容切换，通过绑定点击事件控制点赞和收藏功能。随后，引入Swiper轮播，并将其与分段器联动，实现在分段器切换时轮播内容也随之变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要实现的效果

步骤：

一、首先使用分段器

<!-- 分段器   active-color:被选中的文字	inactive-color：未被选择的文字-->
		<u-subsection :list="list" 
:current="currentIndex" activeColor="#000" 
inactiveColor="#999" fontSize="30rpx" 
mode="button" bgColor="rgb(242, 243, 245)" 
@change="onClickItem"></u-subsection>


注释：@change="onclickItem"不加（参数）的原因：分段器内部封装了回调函数，再加（参数）会导致回调参数被覆盖

分段器 u-subsection属性：

二、实现将点击入口和分段器切换绑定，在主页面中：

<templete>
    <view class="importmation">
        //点赞
        <view @click="collect(0)">点赞</view>
        //收藏
        <view @click="collect(1)">收藏</view>
    </view>
</templete>
<script>
function collect(index){
    uni.navigateTo({
        url:`/pages/myhome/collect/collect?index=${index}`
    })
}
</script>

遇到url:``样式传递参数时需要用到onLoad((option)=>{})

option是要传递的参数
onLoad((option)=>{
    currentIndex.value=parseInt(option.index)        -->parseInt()是固定格式
})

三、设置点击事件@change=“onclickItem”

//index:是分段器回调方法change返回的参数index下标，每个分段的值为其下标。当currentIndex.value为0时，是点赞，当currentIndex.value为1时，为收藏
function onclickItem(index){
    currentIndex.value=index
}

此时已经能实现点击切换分段器，之后想要实现点击分段器使得主体部分随之改变需要使用uview-plus轮播

四、swiper轮播html：

<swiper :current="currentIndex" style="height:100%" @change="changeFun>
			<swiper-item>
				<collections></collections>
				<collections></collections>
			</swiper-item>
			<swiper-item>
				<collections></collections>
				<collections></collections>
			</swiper-item>
</swiper>

参数：

五·、设置轮播的@change点击回调方法：

e:事件对象，事件参数
点击切换轮播事件
function changeFun(e){
    currentItem.value=e.detail.current
}

此时实现了轮播切换效果，下一步实现将分段器切换和轮播切换绑定