小程序点击tab导航栏滑动居中

图片

wxml：

<scroll-view class="scroll-view_H"scroll-left="{{scroll_left}}"scroll-with-animation="true"scroll-x="true"><view class="scroll-view-item_H"><view wx:for="{{topArray}}"bindtap="clickTitle"data-type = "{{item.type}}"class="{{type === item.type ?'active':''}}"wx:key="index">{{item.title}}</view></view></scroll-view>

js

Page({/*** 页面的初始数据*/data: {topArray: [{ title: '家具', type: 2 },{ title: '生鲜冻品', type: 13 },{ title: '美妆护肤', type: 11 },{ title: '数码电器', type: 12 },{ title: '食品粮油', type: 14 },{ title: '母婴用品', type: 15 },],type: null, // 默认是类型2scroll_left: 0, // 设置滚动条距离左边的位置。},// 点击头部title的处理事件clickTitle(e) {var that = this;var index = e.currentTarget.dataset.indexvar type = e.currentTarget.dataset.typethat.setData({type: type})that.getMarkerList(type)},/*** 页面传来的type。*/getMarkerList(page_tab_type) {var that = thisvar type = page_tab_typethat.Scroll_locatation(type)},Scroll_locatation(type) {var that = thisvar item_index = that.whitch_tab_item(type)var scroll = 100 * item_index-100that.setData({type: type,scroll_left: scroll})},// 判断是那个tab_itemwhitch_tab_item(type) {var that = thisvar tab_list = that.data.topArrayvar item_index = nulltab_list.forEach((item, index) => {if (item.type === type) {item_index = index}})return item_index},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = thisvar tab_list = that.data.topArrayvar id_index = nulltab_list.forEach((item,index) =>{if(item.title == "数码电器"){id_index = item.type}})console.log(id_index,"------")this.getMarkerList(id_index)},
})

css


.scroll-view_H{white-space: nowrap;margin-bottom:16rpx;
}
.scroll-view-item_H{display: inline-block;width:70%;
}
.scroll-view-item_H>view{display: inline-block;width: 100px;text-align: center;height:67rpx;line-height: 67rpx;
}
.scroll-view-item_H>view.active{background: #FF6551;border-radius: 50px;color:#FFF;
}

小程序点击tab导航栏滑动居中相关推荐

微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏固定导航栏可滑动导航栏顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...
微信小程序点击tab栏切换，点击切换某个tab滚动到中间（ uniapp ）
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...
微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
微信小程序——不同角色的导航栏显示不同
文章目录问题描述解决方法代码实现底部导航栏排查员存在的问题问题描述微信小程序的原生底部导航栏限制了数量(3-5个)且不能根据你的不用用户进行动态的底部导航栏变化,无法适应多种用户从 ...
微信小程序自定义头部标题导航栏
/*** 微信小程序头部自定义标题导航栏* * 参数:* pageTitle: 导航栏标题,默认不显示* navColor: 导航栏背景颜色,默认白色,透明为'transparent'属性值* noS ...
vue仿今日头条_微信小程序仿今日头条导航栏滚动解析
项目需要,做一个和今日头条一样的导航栏,可以横行滚动,幸好再weui里面看到了类似的例子地址:https://weui.shanliwawa.top/demo/js4.html,使用iscroll- ...
微信小程序制作页面内导航栏
描述项目要写一个页面内的导航栏,功能包括点击更改导航栏的样式,切换数据源. 成果介绍首先对导航栏设置flex布局,让三个导航标签评分屏幕,之后设置点击事件,样式改变和数据切换代码 wxml & ...
小程序模拟今日头条导航栏，点击锚点跳转对应楼层
使用场景,顶部导航的个数不确定,会有超出屏幕的情况,在一行展示,每点击一个导航的tab会判断是否向左或者像右滚动一个距离,以使当前的点击的导航能看到.同时点击导航会锚点跳转对应楼层,当前导航会变为激活 ...
初尝微信小程序2-Swiper组件、导航栏标题配置
swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...

小程序点击tab导航栏滑动居中

图片

wxml：

js

css

小程序点击tab导航栏滑动居中相关推荐

最新文章

热门文章