轮播图

<!-- 轮播图 -->
<view class="showImg">
  <swiper class="swiper" indicator-dots="true"  circular  interval="2000" duration="1000" 
  indicator-color="rgba(0,0,0,0.5)" indicator-active-color="#ffffff" >
    <block wx:for="{{backgroundImages}}" wx:for-item="item" wx:for-inedex="index" wx:key="index">
        <swiper-item>
          <view class="box" >
            <image src="{{item}}" class="slideImage"
              bindtap='previewImg' data-id='{{index}}' data-src='{{item}}'></image>
            </view>
        </swiper-item>
    </block>
  </swiper>
</view>

indicator-color="rgba(0,0,0,0.5)" 轮播图知识点背景颜色
indicator-active-color="#ffffff" 选中颜色

 .box{
//给轮播图加阴影效果 
  box-shadow:0px 10px 8px -12px rgb(69, 82, 69); 
  /* background-color: rgba(0, 0, 0, 0); */
  width: 95%;
  height: 285rpx;
  border-radius: 15rpx;
  margin-left: 18rpx;

}

 .positionText{
  font-weight: 700;
  font-size: 32rpx;
  width: 95rpx;
  height: 50rpx;
   /* 文字根据盒子宽度显示，不换行，超出用省略号代替 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;  
  margin-left: 34rpx;
  text-align: center;
}`

常用的flex布局重点 https://www.jianshu.com/p/4290522e1560

小程序常用的方法

  // 图片放大
    previewImg: function (event) {
      let that = this;
      let currentUrl = event.currentTarget.dataset.src;
      console.log(event.currentTarget.dataset.src);
      wx.previewImage({
      current:currentUrl,   //当前图片地址
      urls: that.data.backgroundImages,  //所有要预览的图片的地址集合 数组形式 本地图片不好用
    })
    },

    //返回上一页
    backAction: function(){
      var pages = getCurrentPages(); //当前页面
      var beforePage = pages[pages.length - 2]; //前一页
      wx.navigateBack({
        success: function () {
          beforePage.onLoad(); // 执行前一个页面的onLoad方法
        }
      });
    },
    //监听屏幕滚动 判断上下滚动
    onPageScroll: function(ev) {
      var scrollTop = ev.scrollTop;
      var that = this;
      var opacity = that.data.opacity;
      console.log(scrollTop)
      if (scrollTop > 180) {
        that.setData({
          isShowToolBar: true,
  //         returnBtn: false
        })
        if (scrollTop > 180 && scrollTop < 200) {
          that.setData({
            opacity: 0.4,
          })
        } else if (scrollTop > 200 && scrollTop < 220) {
          that.setData({
            opacity: 0.6,
          })
        } else if (scrollTop > 240) {
          that.setData({
            opacity: 1,
          })
        }
      } else {
        this.setData({
          isShowToolBar: false,
  //         returnBtn: true
        })
      }
    },

  // 分享转发功能
  onShareAppMessage (e) {
    return {
      title: this.data.rentalMode+"•"+this.data.room,
      path:'/pages/index/index?url=${url}'
    }
    },
  

  // 文字展开和隐藏
  showAll: function (e) {
    this.setData({
      isFold: !this.data.isFold
    })
    var that = this;
    if(that.data.isFold==true){
      this.setData({
        isFold: true,
        show:'展开全部'
      })
    }else{
      this.setData({
        isFold: false,
        show:'收起'
      })
    }
  },



  // 收藏功能
  rentBoxAction: function(){
    this.setData({
      collect:!this.data.collect
    })
    var that = this;
    if(that.data.collect==true){
      this.setData({
        collect: true,
        preservation:'收藏'
      })
    }else{
      this.setData({
        collect: false,
        preservation:'已收藏'
      })
    }

  },

 
// 查看地址
  houseAddressAction: function(){

    wx.openLocation({
      latitude:this.data.lat,
      longitude:this.data.lon,
      name:this.data.name,
      address:this.data.address,
      scale: 18
    })

     //打开当前地址
    // var that = this;
    // wx.getLocation({
    //   type: 'gcj02', //返回可以用于wx.openLocation的经纬度
    //   success (res) {
    //     const latitude = res.latitude
    //     const longitude = res.longitude
    //     const name = res.name
    //     const address = res.address
    //     that.setData({
    //       name: "111",
    //       address: "22222"
    //     })
       
    //   }
    //  })
  },