小程序制作中遇到的坎，记录下~

一、修改微信小程序组件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">