一、修改微信小程序组件swiper的点点样式
之前也是从往上找到了一些方法,但是没有改过来,然后测试修改,才发现级别不够,所以给整个轮播前加上page 就可以修改他的样式了,可以看控制台里面,page是顶级的标签。
page .homeB1D2-swiper .wx-swiper-dot{width: 8rpx;height: 4rpx;border-radius: 2rpx;}
page .homeB1D2-swiper .wx-swiper-dot-active{width: 28rpx;}
page .homeB1D2-swiper .wx-swiper-dots.wx-swiper-dots-horizontal{margin-top: 42rpx;display: block;}
二、微信小程序简单的点击显示隐藏
大牛请忽略,入门要写的话,可以帮助一点。
<!--wxml-->
<blocl wx:if="{{showView}}">
<view class="zxzxBox">
<button>在线客服</button>
<button>联系电话</button>
</view>
</blocl>
<button class="zxzxBtn" bindtap="onChangeShowState"><image src='../images/zxzxico.png'></image>在线咨询</button>
<!--js-->
data: {
showView: false,
},
onLoad: function (options) {
showView: (options.showView == "false" ? true : false)
},
onChangeShowState: function () {
var that = this;
that.setData({
showView: (!that.data.showView)
})
}
三、微信小程序 Image 图片实现宽度100%,高度自适应
给image 标签上加 【 mode=”widthFix”】 这个属性就可以让高度自适应啦。
<image class="img" src="../../images/ceshi.png" mode="widthFix">