试讲
课程
×
试讲
课程
| 张树彬 | |
| 软件工程 | 数字媒体 | 物联网 | |
| 党员 | |
| 13*0**35481 | |
| 1942194789@qq.com | |
| 撸码 | 逛B站 | 运动 | 美食 | 绿植 |
I'm a passinate web developer and creative technologist with a keen eye form design and a loe for building innovative digital solutions. With expertise in both front-end and back-end development, I create seamless user experience that lear a lasting impression.
My approach combines technical excellenace with creative problem-solving to deliver projects that not only meet but also exceed expectations.
I have a strong understanding of the entire development process and can deliver high-quality results on time. I also have a passion for learning and staying up-to-date with the latest industry trends and technologies.
WEB
微信小程序
微信公众号
柯麦商城
北医大一医
内置组件 Built-in Component
滚动视图 <scroll-view>
23数媒1班
23数媒2班
23数媒3班
水平滚动
垂直滚动
事件
规范开发
高效开发
自主开发
发现美
欣赏美
创造美
理论讲解
案例分析
项目实操
0.5 - 理论
0.5 - 实操
1.0 - 练习
听
思
撸
<scroll-view> // 子项内容 </scroll-view>
| item | desc |
|---|---|
| scroll-x | 允许横向滚动；布尔 ；最好也显式指定宽度；谨慎使用 % 宽度 |
| scroll-y | 允许纵向滚动；布尔；应显式指定高度 |
| scroll-into-view | 滚动到值为 id 的某子元素；id 不能以数字开头 |
| scroll-with-animation | 使用动画过渡；布尔 |
| scroll-top | 设置竖向滚动条位置 |
| bindscroll | 滚动时触发 |
| item | desc |
|---|---|
| enable-flex | 水平方向启用 flexbox；布尔；默认 false |
| using-sticky | 启用粘性定位 sticky；布尔；默认 false |
<scroll-view class="scroll-view" scroll-x enable-flex> <view class="item">Lorem.</view> <view class="item">Iure?</view> <view class="item">Ipsam.</view> <view class="item">Aspernatur!</view> <view class="item">Ipsam?</view> </scroll-view>
.scroll-view {
display: flex;
gap: 20rpx;// 无效
}
.item {
width: 40%;
background-color: #f40;
color: #fff;
aspect-ratio: 16/9;
border-radius: 20rpx;
margin-right: 20rpx;// 额外指定间隔
}
<scroll-view class="scroll-view" scroll-x>
<view class="wrap">
<view class="item">Lorem.</view>
<view class="item">Iure?</view>
<view class="item">Ipsam.</view>
<view class="item">Aspernatur!</view>
<view class="item">Ipsam?</view>
</view>
</scroll-view>
.wrap {
display: flex;
gap: 20rpx;
}
.item {
width: 40%;
background-color: #f40;
aspect-ratio: 16/9;
border-radius: 20rpx;
}
<scroll-view class="scroll-view scroll-x"> <text class="text">Lorem.</text> <text class="text">Eum.</text> <text class="text">Rerum.</text> <text class="text">Blanditiis?</text> <text class="text">Officiis!</text> </scroll-view>
.scroll-view {
white-space: nowrap;
}
.text {
padding: 0 20px;
}
<scroll-view class="scroll-view scroll-x"> <view class="text">Lorem.</view> <view class="text">Eum.</view> <view class="text">Rerum.</view> <view class="text">Blanditiis?</view> <view class="text">Officiis!</view> </scroll-view>
.scroll-view {
white-space: nowrap;
}
.text {
display: inline-block;//必须
// display: inline; //ok
padding: 0 20px;
}
<scroll-view class="scroll-view" scroll-y> <view class="item">Lorem.</view> <view class="item">Iure?</view> <view class="item">Ipsam.</view> <view class="item">Aspernatur!</view> <view class="item">Ipsam?</view> </scroll-view>
.scroll-view {
height: 500rpx;
}
.item {
height: 60%;
}
<view class="wrap">
<view class="nav">
<view class="nav-item {{curInd==index?'active':''}}" wx:for='{{navs}}' wx:key="id" bind:tap="toView" data-ind="{{index}}">{{item.tag}}</view>
<view>
<scroll-view class="cont" scroll-y scroll-into-view="nav{{curInd}}" scroll-with-animation>
<view class="cont-item" wx:for="{{products}}" wx:key='id' id='nav{{index}}'>
<view class="cont-title">- {{item.title}} -</view>
<view class="cont-inner-item" wx:for="{{item.lists}}" wx:key="id">{{item.title}}</view>
</view>
</scroll-view>
</view>
data: {
curInd:0,
navs: [{
id: 0,
tag: '匀浆',
icon: 'icon-bread'
}],
products: [{
id: 0,
title:'匀浆',
lists: [{
id: 0,
image: '',
title: '匀浆膳',
desc: '',
price: ''
}]
}]
}
toView(e){
let curInd=e.target.dataset.ind;
this.setData({
curInd
})
}