mpics项目总结（vue）

1.页面滚动时发送加载数据请求

created() {
  // 监听页面滚动
  window.addEventListener('scroll', this.onScroll);
}
    
onScroll() {
    //可滚动容器的高度
    let innerHeight = document.querySelector('#allcon').clientHeight;
    //屏幕尺寸高度
    let outerHeight = document.documentElement.clientHeight;
    //可滚动容器超出当前窗口显示范围的高度
    let scrollTop = document.documentElement.scrollTop;
    //scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
    // console.log(innerHeight + " " + outerHeight + " " + scrollTop);
    if (innerHeight < (outerHeight + scrollTop)) {
      //加载更多操作
      this.min_id += 1;
      this.getHouses(this.min_id)
    }
  }
},

2.通过js设置点击切换样式效果(通过:class也可实现)

$(".ul_items li").removeClass("act");
$(".ul_items li")
 .eq(0)
 .addClass("act");

3.商品展示部分（轮播图）

------------------------------------html---------------------------------------
<div class="pic_big" :style="{'background-image': 'url('+data.pic[0]+')'}"></div>
<div class="pics_warp clear">
  <div class="left_btn opt_btn" @click="youclick">&lt;</div>
  <div class="container">
    <div class="pics_container clear" ref="pics_container">
      <li v-for="(item,index) in data.pic" :key="index" class="pics_img">
        <img
          :src="item"
          alt=""
          @click="clickImg"
        />
      </li>
    </div>
  </div>
  <div class="right_btn opt_btn" @click="zuoclick">&gt;</div>
</div>

--------------------------------------js---------------------------------------
clickImg(e) {
  let target = e.target;
  this.$refs.pic_big.style.backgroundImage = `url(${target.src})`;
},
zuoclick() {
  if (this.pos <= -130 * ($(".pics_img").length - 5)) return;
  this.pos -= 130;
  this.$refs.pics_container.style.left = this.pos + "px";
},
youclick() {
  if (this.pos >= 0) return;
  this.pos += 130;
  this.$refs.pics_container.style.left = this.pos + "px";
}

4.wxlogin

<wxlogin appid="wx9eea37f97bccb956" scope="snsapi_login" redirect_uri=" encodeURIComponent('http://mpics.duocaishenghuo.cn/index')"></wxlogin>

import wxlogin from 'vue-wxlogin'

components:{
  wxlogin
},

5.iframe实现地图

<iframe src="https://www.amap.com/place/B073D00LXW" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

参考：iframe www.w3school.com.cn/tags/tag_if…