滑动效果
在实际开发过程中我们会遇到从右往左的滑动效果还不是从上到下的滑动效果,比如:
那么这种效果是怎么实现的呢直接上代码
html部分:
<template>
<view class="top">
<view class="content">
<view class="address-selection-box">
<view class="selection-text">
选择门店
</view>
<image src="/static/cha.png" mode="aspectFit"
style=" width: 35rpx; height: 35rpx; top: 1044rpx; right: 70rpx; position: fixed;"></image>
</view>
<view class="content_items" v-for="(item,index) in store_list" :key="index"
:class="active_index == index ? 'active' : ''" @click="handleItem(item,index)">
<view class="" style="display: flex;align-items: center;">
<view style="width: 300rpx; height: 220rpx; margin: -16rpx 0 0 20rpx;">
<image :src="item.img" mode="aspectFill"
style="width: 300rpx; height: 220rpx; border-radius: 10rpx;"></image>
</view>
<view class=""
style=" display: flex;flex-direction: column;margin: -100rpx 0 0 36rpx;width: auto; height:370rpx;justify-content: flex-end;">
<text
style="font-weight: bold; width: 330rpx; margin-bottom: 10rpx; font-size: 32rpx;">{{ item.name }}</text>
<view class="content_items_address">{{ item.address }}</view>
<view class="content_items_info">
<text>{{ item.distance }}</text>
</view>
</view>
</view>
</view>
</view>
<view class="footer">
<view class="footer_btn" @click="changeStore">切换门店</view>
</view>
</view>
</template>
script部分:
<script>
export default {
onLoad() {
this.getActiveIndex()
},
computed: {
store_list() {
return this.$Common.getStoreList()
},
now_store() {
return this.$Common.getStore()
}
},
data() {
return {
store_list: [{
name: '11223344我是我是我是我是我是我是我是我是我是我是我是我是',
distance: '662.7km',
address: '112233445566778899',
img: '/static/jiudian.jpg'
},
{
name: '11223344',
distance: '662.7km',
address: '112233445566778899',
img: '/static/jiudian.jpg'
},
{
name: '11223344',
distance: '662.7km',
address: '112233445566778899',
img: '/static/jiudian.jpg'
},
{
name: '11223344',
distance: '662.7km',
address: '112233445566778899',
img: '/static/jiudian.jpg'
},
{
name: '11223344',
distance: '662.7km',
address: '112233445566778899',
img: '/static/jiudian.jpg'
},
{
name: '11223344',
distance: '662.7km',
address: '112233445566778899',
img: '/static/jiudian.jpg'
},
],
active_index: 0,
picker_item: {}
};
},
methods: {
// // 获取当前选中的门店下标
// getActiveIndex() {
// let active_index
// this.store_list.forEach((item, index) => {
// if (item.id == this.now_store.id) active_index = index
// });
// this.active_index = active_index < 0 ? 0 : active_index
// },
// handleItem(item, index) {
// this.active_index = index
// this.picker_item = item
// },
// changeStore() {
// let {
// id,
// name
// } = this.picker_item
// this.$Common.setStore(id, name)
// uni.showToast({
// title: '切换成功!',
// icon: 'none'
// })
// setTimeout(() => {
// uni.navigateBack()
// }, 500)
// }
}
}
</script>
css部分:
<style lang="scss">
page {
background-color: #FAFBFD;
}
.top {
width: 100%;
height: 100vh;
// background-color: #F9DF4C;
display: flex;
flex-direction: column;
justify-content: center;
}
.content {
// padding: 0 30rpx;
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
white-space: nowrap;
align-items: flex-end;
overflow-y: hidden;
overflow-x: scroll;
width: 100%;
height: 450rpx;
background-color: #f6f6f6;
border-radius: 10rpx;
margin-top: 807rpx;
&::-webkit-scrollbar {
display: none;
}
}
.content_items {
width: 668rpx;
height: 250rpx;
border: 2rpx solid black;
border-radius: 10rpx;
margin: 0 0 60rpx 22rpx;
background-color: #ffffff;
}
.content_items_info {
float: right;
display: flex;
flex-direction: column;
justify-content: center;
width: 120rpx;
height: 120rpx;
// background-color: #fff;
margin-right: 220rpx;
font-family: 苹方-简;
margin-top: 28rpx;
}
.footer {
box-sizing: border-box;
position: fixed;
left: 0;
bottom: 0;
padding: 30rpx 30rpx 0;
width: 100%;
height: 230rpx;
background-color: #fff;
&_btn {
width: 100%;
height: 100rpx;
text-align: center;
line-height: 100rpx;
background-color: #F9DF4C;
font-weight: bold;
color: #23232D;
}
}
.content_items_address {
width: 300rpx;
height: 65rpx;
white-space: normal;
overflow-y: hidden;
overflow-x: scroll;
margin: 0 0 -13rpx 0rpx;
text-overflow: ellipsis;
font-size: 24rpx;
color: #d1d1d1;
font-family: 苹方-简;
}
.address-selection-box {
position: absolute;
width: 100%;
height: 100rpx;
top: 20rpx;
display: flex;
}
.selection-text {
position: fixed;
width: auto;
height: 80rpx;
font-size: 40rpx;
font-family: 苹果-简;
font-weight: 500;
margin: 20rpx 0 0 40rpx;
}
</style>
关键部分:
需要注意的是overflow-y一定要是hidden不然的话运行的时候竖着的方向会有滑动条哦
运行效果如视频阿里云:
文字超出盒子省略号代替
如何我们遇到文字大于盒子的时候需要超出的部分用省略号代替的时候只需在这个选择题下面添加这些属性即可。
效果:
如果需要文字输入三行在省略的话,首先要盒子高度能放的下三行文字在-webkit-line-clamp:3即可,一行就是-webkit-line-clamp:1、n行就是-webkit-line-clamp:n,前提是盒子高度能够装得下n行文字。