如图
轮播图的光标可以用定位来改变上下左右的位置
wxml:
wxss:
/* 轮播图图片尺寸 */
.home-swiper {
width: 100%;
height: 350rpx;
position: relative;
}
.home-swiper image {
width: 100%;
height: 100%;
}
/* 轮播图指示点 */
.dots {
display: flex;
flex-direction: row;
position: absolute;
top: 311rpx;
width: 100%;
height: 50rpx;
justify-content: center;
}
.dots .dot {
width: 20rpx;
height: 20rpx;
/* background-color: #333; */
/* border: 1rpx solid #e8672e; */
margin-left: 12rpx;
background: #fff;
border-radius: 20rpx;
/* transform: all 0.6; */
opacity: 0.44;
}
/* 调用的css效果 */
.dots .actives {
background-color: #fff;
opacity: 1;
}js:
Page({
/**
* 页面的初始数据
*/
data: {
swiperCurrent: 0,
slider :[
{'img':'/img/img/1.jpg'},
{ 'img': '/img/img/1.jpg' },
{ 'img': '/img/img/1.jpg' },
{ 'img': '/img/img/1.jpg' },
{ 'img': '/img/img/1.jpg' }
]
},
// 轮播图下标
changDot(e) {
this.setData({
swiperCurrent: e.detail.current
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/hz/148947.html