mui左右滑动
下载mui的dist文件夹dist放在node_modules中main.js// 引入mui的css文件和扩展文件import '../node_modules/dist/css/mui.min.css'import '../node_modules/dist/css/icons-extra.css'index.vue中<divclass="mui-sc...
·
下载mui的dist文件夹
dist放在node_modules中
main.js
// 引入mui的css文件和扩展文件
import '../node_modules/dist/css/mui.min.css'
import '../node_modules/dist/css/icons-extra.css'
index.vue中
<div
class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
>
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
<a class="mui-control-item">
<img src="../../assets/img/图层-15@2x.png" alt>
<p class="title">爱心传递能量</p>
<p class="price">
<span>
<i>¥</i> 80
</span>
<span>包邮</span>
</p>
</a>
<a class="mui-control-item">
<img src="../../assets/img/图层-15@2x.png" alt>
<p class="title">爱心传递能量</p>
<p class="price">
<span>
<i>¥</i> 80
</span>
<span>包邮</span>
</p>
</a>
<a class="mui-control-item">
<img src="../../assets/img/图层-15@2x.png" alt>
<p class="title">爱心传递能量</p>
<p class="price">
<span>
<i>¥</i> 80
</span>
<span>包邮</span>
</p>
</a>
</div>
</div>
</div>
<script>
// bug :mui的dist文件要放在node_modules中
import mui from "../../../node_modules/dist/js/mui.min.js";
export default {
mounted() {
//轮播图:获得slider插件对象
var gallery = mui(".mui-slider");
gallery.slider({
interval: 2000 //自动轮播周期,若为0则不自动播放,默认为0;
});
// scroll左右滚动
mui(".mui-scroll-wrapper").scroll({
// deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
scrollY: false, //是否竖向滚动
scrollX: true, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
// indicators: true, //是否显示滚动条
deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
bounce: true //是否启用回弹
});
}
};
css样式
.mui-slider-indicator.mui-segmented-control{
height: 4.3rem;
.mui-scroll{
height: 100%;
a{
width: 32%;
height: 100%;
display: inline-block;
padding: 0 0.15rem;
img{
height: 70%;
}
.title{
text-align: left;
font-size: 0.26rem;
color: rgb(51,51,51);
margin-bottom: 0;
}
.price{
color:rgb(255,159,9);
display: flex;
justify-content: space-between;
line-height: 1;
// margin: 0 0.2rem;
span{
&:first-child{
font-size: 0.3rem;
font-weight: 700;
}
&:last-child{
font-size: 0.2rem;
display: inline-block;
width: 0.6rem;
height: 0.3rem;
border: 0.01rem solid rgb(255,159,9);
border-radius: 0.06rem;
line-height: 0.3rem;
text-align: center;
}
}
}
}
}
}
更多推荐
已为社区贡献27条内容
所有评论(0)