前情提要
组件:scroll-view
scroll-view
可实现一个可滚动的视图区域。
scroll-view
组件有很多属性,常用的有:
-
enable-flex
,是否启用flex布局,只有启用,display:flex
才会生效。布尔值,默认是false
,即默认不启用flex布局。
-
scroll-x
,是否允许横向滚动。布尔值,默认是false
,即默认不允许横向滚动。
-
scroll-into-view
,自动滚动到指定元素的位置上。它的值是scroll-view
的子元素的id
,id
为字符串类型,且不能以数字开头。
-
scroll-with-animation
,滚动条滚动时是否使用动画过渡。布尔值,默认值是false
,即滚动时默认不使用动画过渡。
小程序项目
代码涉及的主要文件有:
- app.json
- pages/index/index.wxml
- pages/index/index.wxss
- pages/index/index.js
app.json
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#0149af",
"navigationBarTitleText": "首页",
"navigationBarTextStyle": "white"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
pages/index/index.wxml
<view class="cameraContainer">
<view class="header">
<input type="text" class="search" placeholder="搜一搜 这里啥都有"/>
<image src="/static/images/search.png"></image>
</view>
<view class="tabContainer">
<scroll-view class="tabs" enable-flex scroll-x scroll-into-view="{{tabId}}" scroll-with-animation>
<view class="tab {{item.id===tabId?'active':''}}" wx:for="{{tabList}}" wx:key="id"
id="{{item.id}}" bindtap="changeTab">
{{item.name}}
</view>
</scroll-view>
</view>
<view class="contentContainer">
<view class="content">{{content}}</view>
</view>
</view>
pages/index/index.wxss
.cameraContainer{
padding: 10rpx;
}
.header{
display: flex;
align-items: center;
border: 1rpx solid #aaa;
border-radius: 6rpx;
padding: 6rpx 10rpx;
}
.header image{
width: 36rpx;
height: 36rpx;
padding: 0 10rpx;
}
.header .search{
flex: 1;
height: 36rpx;
line-height: 36rpx;
font-size: 26rpx;
}
.tabContainer{
margin-top: 20rpx;
}
.tabs{
display: flex;
height: 50rpx;
}
.tab{
height: 40rpx;
line-height: 40rpx;
margin-right: 30rpx;
white-space: nowrap;
font-size: 28rpx;
}
.active{
border-bottom: 4rpx solid #1a74f1;
}
.content{
width: 100%;
height: 600rpx;
line-height: 600rpx;
text-align: center;
background:#eee;
color: #1a74f1;
font-size: 64rpx;
border-radius: 10rpx;
}
pages/index/index.js
Page({
data:{
tabList:[],
tabId:'',
content:''
},
onLoad(){
this.getDataFromServer();
},
changeTab(e){
const tabId = e.target.id;
const tabObj = this.data.tabList.length && this.data.tabList.find(item => item.id === tabId) || {name:""}
this.setData({tabId,content:tabObj.name})
},
getDataFromServer(){
let result = [
{"id": "tab_1","name": "美食"},
{"id": "tab_2","name": "健身"},
{"id": "tab_3","name": "电影"},
{"id": "tab_4","name": "酒店"},
{"id": "tab_5","name": "景点"},
{"id": "tab_6","name": "超市",},
{"id": "tab_7","name": "水果"},
{"id": "tab_8","name": "生鲜"},
{"id": "tab_9","name": "烟酒"},
{"id": "tab_10","name": "买药",},
{"id": "tab_11","name": "培训"},
{"id": "tab_12","name": "养车"},
{"id": "tab_13","name": "家居"},
{"id": "tab_14","name": "宠物"},
{"id": "tab_15","name": "游戏"}
]
this.setData({
tabList:result,
tabId:result.length && result[0].id || '',
content:result.length && result[0].name || ''
})
}
})
相关链接
- 使用scroll-view实现tabs
- 滑块视图的实现
- 使用scroll-view实现滑块视图可能遇到的问题及其解决方法
- 微信小程序中给event对象传递数据
- flex布局:flex-basic flex-grow flex-basis