本文实例为大家分享了微信小程序实现标签左右切换展示的具体代码,供大家参考,具体内容如下
<>强分析
1,设置数据流属性用于:点击当前项时,通过点击事件swichNav中处理e.dataset.current取到点击的目标值。
2,偷窃者组件的当前组件用于控制当前显示哪一页
3,偷窃者组件绑定改变事件switchTab,通过e.detail.current拿到当前页
& lt;视图类=凹锹伎颉北?
& lt;视图类=暗己健北?
& lt;滚动视图scroll-x=" true " class=" navbar-box " srcoll-left=" {{navScrollLeft}}
srcoll-width-animation="{{真}}"比;
& lt;块wx:=" {{recordMain}}”天气:对于指数=癷dx”天气:项=皀avItem”天气:关键=癷dx”比;
& lt;视图类=" nav-item {{currentTab==idx & # 63;“文本”:“}}”数据流=" {{idx}}
bindtap=皊witchNav”比;
& lt; label> {{navItem.text}} & lt;/label>
& lt;/view>
& lt;/block>
& lt;/scroll-view>
& lt;/view>
& lt;/view>
------------------------------------------------
& lt;视图类=皉ecord-ft”比;
& lt;偷窃者类=当前“tab-box”=皗{currentTab}}”时间=" 300 " bindchange=皊witchTab”比;
& lt; swiper-item wx:="{{[0, 1, 2, 3]}}“天气:项=皌abItem”天气:对于指数=癷dx”天气:关键=癷dx”
类=皌ab-cnetent”比;
& lt;块wx:=" {{tabContent}}”天气:项=皌abItem”天气:关键=薄氨?
& lt;视图类=" padding-box " bindtap=皀avigateUrl data-url”=?页/索引/指数”比;
& lt;视图类=" weui-list-box weui-main”比;
& lt;视图类=皐eui-list-bd”比;
& lt;视图类=癷mg-box”比;
& lt;图像src=" https://www.yisu.com/zixun/{{tabItem}}”类=癷mg”模式=皐idthFix祝辞& lt;/image>
& lt;/view>
& lt;/view>
& lt;视图类=皐eui-list-ft”比;
& lt;视图类=皐eui-title”比;
& lt;视图类=" text-flow clamp-xs font-sm”在{{tabItem.title}} & lt;/view>
& lt;视图类=拔谋尽北?
& lt; laber> {{tabItem.text}} & lt;/laber>
& lt; laber> {{tabItem.text}} & lt;/laber>
& lt;/view>
& lt;/view>
& lt;视图类=皐eui-cost”比;
& lt; view>￥& lt; laber> {{tanItem.cost}} & lt;/laber> & lt;/view>
& lt;/view>
& lt;/view>
& lt;/view>
& lt;/view>
& lt;/block>
& lt;/swiper-item>
& lt;/swiper>
& lt;/view>
页面({
const应用=getApp ()
数据:{
recordMian:(
{
标题:“插画艺术”
}，
{
标题:“工艺作品”
}，
{
标题:“服装艺术”
}，
{
标题:“三维建模”
}，
]，
tabContent:(
{
标题:“台灯卧室床头简约现代书房北欧宜家创意装饰个性圆球台灯床头灯”,
文本:“台灯”,
成本:“1255”,
imgUrl:“http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg”,
}，
{
标题:“雪域冰雪天地8寸牛乳芝士蛋糕”,
文本:“蛋糕”,
成本:“15”,
imgUrl:“http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg”,
}，
]，
currentTab: 0,
navScrollLeft: 0
}，//事件处理函数
alt="微信小程序实现标签左右切换效果">
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
