scroll-view 组件可以实现元素横、纵向滚动效果。要使用纵向滚动时,必须给 scroll-view 一个固定高度,同理横向滚动也是需要一个固定宽度。
一、竖向滚动
wxml代码如下:
<scroll-view class="scrollcss scrollcss-y" scroll-y>
<view>阿羡</view>
<view>时间段</view>
<view>打哈</view>
<view>最后一个</view>
</scroll-view>
.wxss代码如下
.scrollcss{
width: 200px;
height: 200px;
border: 1px solid royalblue;
background-color: royalblue;
margin: 50px auto;
}
.scrollcss-y view{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
margin-bottom: 5px;
}
.scrollcss-y view:nth-child(1){
background-color: saddlebrown;
}
.scrollcss-y view:nth-child(2){
background-color: rgb(77, 139, 19);
}
.scrollcss-y view:nth-child(3){
background-color: rgb(222, 224, 64);
}
.scrollcss-y view:nth-child(4){
background-color: rgb(230, 43, 189);
}
二、横向滚动
wxml代码如下:
<scroll-view scroll-x class="swiper-nav" bindtap="swiperNav"
data-w="333" scroll-left='{{swiperNav.x}}'>
<text
class="item-nav {{swiperNav.i == index?'active':''}}"
wx:for="{{swiperNav.arr}}"
wx:key="this"
data-i="{{index}}"
>
{{item.txt}}
</text>
</scroll-view>
.wxss代码如下
.swiper-nav{
background-color: rgb(175, 228, 91);
/* 不换行 */
white-space: nowrap;
/* 去点击元素时的浅蓝色背景 */
/* -webkit-tap-highlight-color : transparent; */
}
.swiper-nav .item-nav{
position: relative;
padding: 32rpx;
color: #999;
font-size: 30rpx;
cursor: pointer;
display: inline-block
}
.swiper-nav .active{
color: #f43838
}
.swiper-nav .active::after{
content:'';
position: absolute;
left: 32rpx;
right: 32rpx;
bottom: 18rpx;
height:0;
border-bottom: 4rpx solid #f43838;
border-radius: 4rpx;
}
/**
* 页面的初始数据
*/
data: {
swiperNav:{
i:0,
x:0,
arr:[
{v:0,txt:"星期一"},
{ v: 1, txt: "星期二" },
{ v: 2, txt: "星期三" },
{ v: 3, txt: "星期四" },
{ v: 4, txt: "星期五" },
{ v: 5, txt: "星期六" }
]
}
},
// 导航栏切换
swiperNav(e){
console.log(e);
/*获取可视窗口宽度*/
var w=wx.getSystemInfoSync().windowWidth;
var leng=this.data.swiperNav.arr.length;
var i = e.target.dataset.i;
// 点击滑动
var disX = (i - 2) * w / leng;
if(i!=this.data.swiperNav.i){
this.setData({
'swiperNav.i':i
})
}
this.setData({
'swiperNav.x':disX
})
},
注意事项:flex布局使用失效问题
直接在<scroll-view></scroll-view>上使用flex时会失效,解决办法有两种:
①<scroll-view enable-flex="true"></scroll-view>添加上这个 enable-flex="true"属性文章来源:https://www.toymoban.com/news/detail-716425.html
②在<scroll-view></scroll-view>下在再加一个容器,在该容器上设置flex文章来源地址https://www.toymoban.com/news/detail-716425.html
到了这里,关于小程序scroll-view 组件的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!