vue+thinkphp构建红包页面前后端第三篇

home.vue 详细解析

github源码:https://github.com/CiroMzy/redpocket

演示地址:http://mazhaoyang.cn/demos/redpocket/

首先,讲一下数据交互,这个页面一共有三个数据请求方式,1.页面渲染前,获取列表数据。2.点击单个红包。3.点击一件打开。

看一下加载列表页面

    mounted(){
      var userid = this.getQueryString('userid');
      var URL = onlineBase+"?userid="+userid;
      Vue.http.get(URL).then(
        (successData) => {
            if(successData.body.state == 1){
              this.listData = successData.body.data;
              this.showList = true;
              this.btnShowActive = false;
            }else{
             this.$set(this.nolistMsg,'msg',successData.body.msg);
              this.showList = false;
              this.btnShowActive = true;
            }
          this.canopenAll = true;
          this.loading = false;
        },
        (fileData) => {console.log(fileData);}
      );

    },

首先在src/config/env.js中配置链接,把onlineBase设置成请求端口地址。引入VueSource,数据格式统一成

{
  state:'0',
  msg:'',
  data:[
    {aa:'aaa'}
  ]
}
state判断数据格式,msg是异常时返回报错信息,data储存对应的返回值列表。

列表的渲染

        <ul v-if="showList"  id="listcontainerUl" >
          <li v-for="(item,index) in listData" class="clear" >
            <div class="fl listleft">
              ¥<span>{{item.amount}}</span>
            </div>
            <div class="fr listright">
              <div class="fl dateorder">
                <p class="date">
                  {{item.send_time}}
                </p>
                <p class="order">
                  订单编号:{{item.orderid}}
                </p>
              </div>
              <div class="fr btn" @click="openOne(index)">
                <div class="p">领取奖励</div>
              </div>
            </div>
          </li>
        </ul>
        <div class="noList" v-else >
          {{nolistMsg.msg}}
        </div>
每个列表绑定一个点击事件,触发openone(),

openOne(index){

        var URL = onlineBase+"?orderid="+this.listData[index].orderid;
        Vue.http.get(URL).then(
          (successData) => {
            if(successData.body.state == 1){

              this.pocketVals.backamount = this.listData[index].backamount;
              this.pocketVals.p_backpoint  = (this.listData[index].p_backpoint)? this.listData[index].p_backpoint:0;
              this.showpocket = true;
              var _this = this;
              var container = document.getElementById('listcontainerUl');
              var oLi = container.childNodes[index];
              oLi.className= 'clear activeLi';
              setTimeout(function () {
                _this.listData.splice(index, 1);
                oLi.className= 'clear ';
              },800);
              setTimeout(function () {
                _this.bein = true;
                _this.closePocket();
              },1600)

            }else{
                console.log(successData.body)
            }
            this.canopenAll = true;
            this.loading = false;
          },
          (fileData) => {console.log(fileData);}
        );

      },

这里,点击之后向后台请求数据,返回成功之后,通过 splice 删除对应列表,然后触发出场动画。出场动画我也是用的css。这里需要注意的是,css的动画时间和js的红包消失时间需要同步。我用setTimeout做的处理。setTimeout的this问题,从有狗那年就有....0.0..,用_this 处理下。

添加一个watch事件,随时检查list的条数,当条数为空时,显示‘没有可开红包’

openAll函数,与此相似,不做解释。

接下来说一下用到的css知识

这里有几个点,第一,小于12px的字体问题。

字体小于12px时,我用的transform:scale(0.78) 进行放缩,当时放缩比需要自己计算。可以用transform-origin进行位置控制。如果有溢出,父层还要写死宽,然后overflow一下。刚刚进行了一个测试,对于字体大小,安卓手机上,支持到最小9px,ios上可以支持到1px

为了让页面平滑一些,我用vue的transition做了个小过渡

随机浏览