爱宜淡写Vivan

爱宜淡写Vivan 查看完整档案

杭州编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

爱宜淡写Vivan 发布了文章 · 5月15日

小程序scroll-view滚动卡顿

小程序使用scroll-view放置wxParse.js解析的文本,解析出来的内容全部是图片,在页面刚进入的时候 ,滑动的时候,在ios部分机型无法滑动,过几秒,再滑动,就可以
因为是wxParse解析的,所以给css上面,引入了wxParse.css
@import '../../utils/wxParse/wxParse.wxss';
把这个删除了 就可以了

查看原文

赞 0 收藏 0 评论 0

爱宜淡写Vivan 发布了文章 · 2019-12-30

小程序外卖订单界面

1.效果界面
微信截图_20191230134113.png
微信截图_20191230134433.png
微信截图_20191230134502.png
微信截图_20191230134515.png

2.涉及功能

*左侧商品类型、右侧商品可以相互控制;
*商品列表加减及购物车商品加减icon消失、显示;
*商品每一次加减,页面视图变化(数量、价格变化、购物车置灰);

3.贴上所有代码

1.wxml
    
<view class="container">
    <view class="index-cont">
      <!-- 左边类型 -->
      <view class="index-left">
        <view wx:for="{{foodsList}}" wx:key="index" class="item {{curId === 'item'+index?'on':''}}" data-id="item{{index}}" bindtap="scrollToViewFn">{{item.name}}</view>
      </view>
      <!-- 右边产品 -->
      <scroll-view class="index-right" scroll-y="{{true}}" scroll-into-view="{{initView}}" scroll-with-animation="true" bindscroll="onPageScroll">
        <view class="boxs">
          <block wx:for="{{foodsList}}" wx:key="index">
            <view class="index-title" id="item{{index}}">{{item.name}}</view>
            <view class="item" wx:for="{{item.list}}" wx:key="ind" wx:for-item="itm" wx:for-index="ind" bindtap="showGoodDetail(itm)">
              <view class="pic"><image data-original="{{itm.pic}}" mode="aspectFill"></image></view>
              <view class="main">
                <view class="tit">{{itm.title}}</view>
                <view class="desc">{{itm.info}}</view>
                <view class="money">¥{{itm.price}}</view>
              </view>
              <view class="box">
                <view wx:if="{{itm.num !== 0}}" class="icon" catchtap="reduceNum(index, ind, itm)"><image data-original="../../../static/images/reduce-icon.png" alt=""></image></view>
                <input wx:if="{{itm.num !== 0}}" type="text" disabled wx:model="{{itm.num}}"/>
                <view class="icon" catchtap="addNum(index, ind, itm)"><image data-original="../../../static/images/add-icon.png" alt=""></image></view>
              </view>
            </view>
          </block>
        </view>
      </scroll-view>
    </view>
    <view class="index-cart">
      <view class="left">
        <view class="cart-num" wx:if="{{cartList.length === 0}}">
          <image data-original="../../../static/images/cart.png"></image>
        </view>
        <view class="cart-num on" wx:else bindtap="showCartMask">
          <image data-original="../../../static/images/cart.png"></image>
          <text>{{totalNum}}</text>
        </view>
        <view class="cart-money">¥{{totalMoney}}</view>
      </view>
      <view class="order-btn" bindtap="submitOrder">去结算</view>
    </view>

    <!--购物车弹窗-->
    <view class="dialog" wx:if="{{isShowCartMask && cartList.length !== 0}}" bindtap="hiddenCartMak()">
      <view class="boxs" catchtap="stopMaopao()">
        <view class="title-block">
          <text>已选商品</text>
          <view class="clear" bindtap="clearCart"><image data-original="../../../static/images/del.png"></image>清空</view>
        </view>
        <scroll-view class="content" scroll-y="{{true}}" scroll-with-animation="true">
          <block wx:for="{{cartList}}" wx:key="index">
            <view class="item" id="{{item.view}}">
              <view class="tit">{{item.name}}</view>
              <view class="right">
                <text>¥{{item.price}}</text>
                <view class="box">
                  <view class="icon" bindtap="reduceCart(index, item)"><image data-original="../../../static/images/reduce-icon.png" alt=""></image></view>
                  <input type="text" disabled wx:model="{{item.num}}"/>
                  <view class="icon" bindtap="addCart(index, item)"><image data-original="../../../static/images/add-icon.png" alt=""></image></view>
                </view>
              </view>
            </view>
          </block>
        </scroll-view>
      </view>
    </view>
    <!--商品详情弹窗-->
    <view class="dialog1" wx:if="{{isShowDetail}}">
      <scroll-view class="detbox" scroll-y="{{true}}" scroll-with-animation="true">
        <image class="img" data-original="{{goodDetail.pic}}" mode="aspectFit"></image>
        <view class="box">
          <view class="tit">{{goodDetail.title}}</view>
          <view class="money">¥{{goodDetail.price}}</view>
          <view class="desc">{{goodDetail.info}}</view>
        </view>
        <view class="close" bindtap="hideDetail"><image data-original="../../../static/images/close_ico.png"></image></view>
      </scroll-view>
    </view>
  </view>
2.script
createPage({
  data: {
    foodsList: [], // 商品数据
    cartList: [], // 购物车数据
    isShowCartMask: false,
    totalNum: 0,
    totalMoney: 0,
    initView: 'item0', // 根据此变量的变化,控制左侧选中状态、右侧滑动
    curId: 'item0',
    isShowDetail: false,
    goodDetail: {},
    screenWidth: 0, // 手机屏幕宽度
    heightArray: [0] // 右侧每一个类型的高度区间数组
  },
  onLoad() {
    this.getGoodsData()
  },
  methods: {
    async getGoodsData() {
      const that = this
      const res = await getGoodsInfo({})
      this.foodsList = res
      wx.getSystemInfo({
        success: (ress) => {
          that.screenWidth = ress.windowWidth
        }
      })
      this.getHeightSection()
    },
    // 设置高度区间 所有单位转化为rpx
    getHeightSection() {
      const that = this
      let hg = 0
      for (let index = 0; index < that.foodsList.length - 1; index++) {
        hg += 70 + that.foodsList[index].list.length * 212
        that.heightArray.push(hg)
      }
    },
    // 获取高度区间的下标
    getHeightIndex(arr, hg) {
      const that = this
      arr.forEach((item, index) => {
        if (hg >= item) {
          that.setData({
            curId: 'item' + index
          })
        }
      })
    },
    // 左边菜单控制右边
    scrollToViewFn(e) {
      this.setData({
        initView: e.target.dataset.id,
        curId: e.target.dataset.id
      })
    },
    // 右边滚动控制左边
    onPageScroll(e) {
      const that = this
      let scrollTop = e.detail.scrollTop * 750 / that.screenWidth
      this.getHeightIndex(that.heightArray, scrollTop)
    },
    // 商品列表的减号点击
    reduceNum(index, ind, item) {
      const that = this
      let val = 'foodsList[' + index + '].list[' + ind + '].num'
      this.setData({
        [val]: item.num - 1
      })
      // 如果商品为0,就把当前商品在购物车清除
      // 如果不为0, 就将当前商品数量减1
      if (that.foodsList[index].list[ind].num === 0) {
        that.removeAarry(that.cartList, item.id)
      } else {
        that.cartList.forEach((itm, i) => {
          if (itm.id === item.id) {
            let value = 'cartList[' + i + '].num'
            that.setData({
              [value]: itm.num - 1
            })
          }
        })
      }
      this.computed()
    },
    // 商品列表的加号点击
    addNum(index, ind, item) {
      const that = this
      let val = 'foodsList[' + index + '].list[' + ind + '].num'
      this.setData({
        [val]: item.num + 1
      })
      // 如果商品为1,就把当前商品加入购物车
      // 否则, 就将当前商品数量加1
      if (that.foodsList[index].list[ind].num === 1) {
        let val = { id: item.id, name: item.title, price: item.price, num: 1, index: index, ind: ind, pic: item.pic }
        that.cartList.push(val)
      } else {
        that.cartList.forEach((itm, i) => {
          if (itm.id === item.id) {
            let value = 'cartList[' + i + '].num'
            that.setData({
              [value]: itm.num + 1
            })
          }
        })
      }
      this.computed()
    },
    // 购物车的减号点击
    reduceCart(index, item) {
      const that = this
      let val = 'foodsList[' + item.index + '].list[' + item.ind + '].num'
      let val1 = 'cartList[' + index + '].num'
      this.setData({
        [val]: item.num - 1,
        [val1]: item.num - 1
      })
      // 如果商品为0,就把当前商品在购物车清除
      // 如果不为0, 就将当前商品数量减1
      if (that.cartList[index].num === 0) {
        that.removeAarry(that.cartList, item.id)
      }
      this.computed()
    },
    // 购物车的加号点击
    addCart(index, item) {
      const that = this
      let val = 'cartList[' + index + '].num'
      that.setData({
        [val]: item.num + 1
      })
      this.computed()
    },
    // 清空购物车
    clearCart() {
      const that = this
      wx.showModal({
        title: '提示',
        content: '清空购物车?',
        success: function (res) {
          if (res.confirm) {
            that.setData({
              cartList: []
            })
            that.foodsList.forEach((item, i) => {
              item.list.forEach((itm, j) => {
                let value = 'foodsList[' + i + '].list[' + j + '].num'
                that.setData({
                  [value]: 0
                })
              })
            })
            that.computed()
          }
        }
      })
    },
    // 计算选择商品总价格和总数量
    computed() {
      const that = this
      let num = 0
      let money = 0
      that.cartList.forEach(item => {
        num += item.num
        money += parseFloat(item.price) * item.num
      })
      that.setData({
        totalNum: num,
        totalMoney: money
      })
    },
    // 将数量为0的时候,对应商品在购物车中删除
    removeAarry(arr, id) {
      arr.forEach((item, index) => {
        if (item.id === id) {
          arr.splice(index, 1)
        }
      })
      return arr
    },
    showCartMask() {
      this.isShowCartMask = !this.isShowCartMask
    },
    hiddenCartMak() {
      this.isShowCartMask = false
    },
    stopMaopao() {
    },
    showGoodDetail(item) {
      this.goodDetail = item
      this.isShowDetail = true
    },
    hideDetail() {
      this.isShowDetail = false
    },
    // 订单提交
    submitOrder() {
    }
  }
})

3.css

<style lang='scss'>
@import '../../style/base.scss';
page {
  height: 100%;
}
.container {
  height: 100vh;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;
    .dialog1{
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      background-color: rgba(0,0,0, 0.5);
      z-index: 4;
        .detbox{
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: #fff;
          width: 100%;
          max-height: 700rpx;
          overflow-y: auto;
          color: #333;
          border-radius: 40rpx 40rpx 0 0;
            .img{
              width: 100%;
              height: 375rpx;
              background: rgba(0,0,0,0.6);
            }
            .box{
              padding: 20rpx 30rpx 40rpx;
              box-sizing: border-box;
                .tit{
                  font-size: 28rpx;
                  color: #333;
                  font-weight: bold;
                }
                .money{
                  font-size: 26rpx;
                  color: #f00;
                  margin: 10rpx 0;
                }
                .desc{
                  font-size: 22rpx;
                  color: #666;
                  line-height: 32rpx;
                }
            }
            .close{
              width: 50rpx;
              height: 50rpx;
              position: absolute;
              right: 20rpx;
              top: 20rpx;
              display: flex;
              align-items: center;
              justify-content: center;
                image{
                  width: 40rpx;
                  height: 40rpx;
                }
            }
        }
    }
    .dialog{
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      background-color: rgba(0,0,0, 0.5);
      z-index: 2;
        .boxs{
          position: fixed;
          bottom: 80rpx;
          left: 0;
          right: 0;
          z-index: 6;
          background-color: #fff;
          width: 100%;
          max-height: 600rpx;
          color: #333;
            .title-block{
              padding: 0 30rpx;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: space-between;
              height: 70rpx;
              background: #EEF0F1;
                text{
                  font-size: 26rpx;
                  color: #666;
                }
                .clear{
                  font-size: 22rpx;
                  color: #888;
                  display: flex;
                  align-items: center;
                    image{
                      width: 24rpx;
                      height: 24rpx;
                      margin-right: 10rpx;
                    }
                }
            }
            .content{
              width: 100%;
              max-height: 530rpx;
              overflow-y: auto;
              padding-bottom: 30rpx;
              box-sizing: border-box;
                .item{
                  width: 690rpx;
                  height: 80rpx;
                  line-height: 80rpx;
                  margin: 0 auto;
                  position: relative;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                    &::after{
                      position: absolute;
                      width: 100%;
                      height: 1rpx;
                      background: #f2f2f2;
                      content: '';
                      bottom: 1rpx;
                      left: 0;
                    }
                    .tit{
                      width: 400rpx;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      font-size: 28rpx;
                      color: #333;
                    }
                    .right{
                      display: flex;
                      justify-content: flex-start;
                      align-items: center;
                      height: 80rpx;
                        text{
                          font-size: 26rpx;
                          color: #f00;
                        }
                        .box{
                          display: flex;
                          justify-content: flex-start;
                          align-items: center;
                          flex-wrap: nowrap;
                          margin-left: 20rpx;
                          height: 80rpx;
                            .icon{
                              width: 34rpx;
                              height: 34rpx;
                              display: flex;
                              align-items: center;
                              justify-content: center;
                                image{
                                  width: 34rpx;
                                  height: 34rpx;
                                }
                            }
                            input{
                              width: 60rpx;
                              height: 34rpx;
                              border: none;
                              color: #333;
                              text-align: center;
                              font-size: 26rpx;
                            }
                            
                        }
                    }
                }
            }
        }
    }
    .index-cont{
      height: calc(100vh - 80rpx);
      display: flex;
      justify-content: space-between;
      .index-left{
        width: 160rpx;
        height: 100%;
        background: #efefef;
          .item{
            font-size: 26rpx;
            color: #333;
            border-bottom: 1rpx dashed #666;
            height: 80rpx;
            line-height: 80rpx;
            padding: 0 20rpx;
            box-sizing: border-box;
              &.on{
                background: #fff;
              }
          }
      }
      .index-right{
        width: 590rpx;
        height: 100%;
          .boxs{
            padding: 0 30rpx;
            box-sizing: border-box;
            width: 100%;
          }
          .index-title{
            height: 70rpx;
            line-height: 70rpx;
            background: #f7f7f7;
            padding-left: 30rpx;
            font-size: 26rpx;
            color: #666;
            box-sizing: border-box;
          }
          .item{
            padding: 30rpx 0;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            position: relative;
            height: 212rpx;
              &::after{
                position: absolute;
                top: 0rpx;
                left: 0;
                background: #ccc;
                width: 100%;
                height: 1rpx;
                content: '';
              }
              .pic{
                width: 150rpx;
                height: 150rpx;
                  image{
                    width: 100%;
                    height: 100%;
                  }
              }
              .main{
                width: 380rpx;
                padding-left: 30rpx;
                box-sizing: border-box;
                  .tit{
                    font-size: 26rpx;
                    color: #333;
                    font-weight: bold;
                  }
                  .desc{
                    font-size: 22rpx;
                    color: #999;
                    line-height: 30rpx;
                    margin: 5rpx 0 10rpx;
                    min-height: 65rpx;
                  }
                  .money{
                    font-size: 28rpx;
                    color: #f00;
                  }
              }
              .box{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: nowrap;
                margin-left: 10rpx;
                height: 34rpx;
                position: absolute;
                right: 0;
                bottom: 30rpx;
                  .icon{
                    width: 34rpx;
                    height: 34rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                      image{
                        width: 34rpx;
                        height: 34rpx;
                      }
                  }
                  input{
                    width: 60rpx;
                    height: 34rpx;
                    border: none;
                    color: #333;
                    text-align: center;
                    font-size: 26rpx;
                  }
                  
              }
          }
      }
    }
    .index-cart{
      width: 100%;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      z-index: 3;
        .left{
          width: 470rpx;
          height: 100%;
          background: #3e3a39;
          display: flex;
          align-items: center;
          justify-content: flex-start;
            .cart-num{
              width: 100rpx;
              height: 100rpx;
              background: #6E6D6C;
              position: relative;
              padding:25rpx;
              box-sizing: border-box;
              border-radius: 100%;
              top: -30rpx;
              left: 22rpx;
                &.on{
                  background: $base-color;
                }
                image{
                  width: 50rpx;
                  height: 50rpx;
                }
                text{
                  font-size: 20rpx;
                  color: #fff;
                  display: inline-block;
                  padding: 0 9rpx;
                  box-sizing: border-box;
                  position: absolute;
                  right: 3rpx;
                  top: -3rpx;
                  height: 30rpx;
                  line-height: 30rpx;
                  border-radius: 30rpx;
                  background: #f00;
                }
            }
            .cart-money{
              color: #fff;
              font-size: 30rpx;
              margin-left: 50rpx;
            }
        }
        .order-btn{
          width: 280rpx;
          height: 100%;
          background: $base-color;
          font-size: 28rpx;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
    }
}

4.ps
小程序使用mpx为框架;
商品列表数据根据接口获取,测试数据可以根据mock数据测试
实际数据类型是

goodLists: [
    {
        id: 'xx',   
        name: 'xx', // 商品类型
        list: [ // 当前商品类型对应的所有商品
            {
                id: 'xx',
                title: 'xx',
                pic: 'xx',
                price: 'xx',
                detail: 'xx',
                num: ''  // num是为了我方便对商品加减操作,让后端加的
            }
        ]
    }
]
查看原文

赞 1 收藏 1 评论 0

爱宜淡写Vivan 发布了文章 · 2019-11-27

数组去重

一.ES6中set方法:[...new Set(arr)]
var arr1 = [1,2,2,3,3,4,5,5];
[...new Set(arr1)].toString()
二.遍历数组,建立新数组,利用indexOf()判断是否存在于新数组中,不存在则push到新数组,最后返回新数组
var arr2 = [1,2,2,2,3,3,4,4,5,5];
function removeSame(arr){
    var ret = [];
    for(var i=0,j=arr.length;i<j; i++){
        if(ret.indexOf(arr[i]) === -1){
            ret.push(arr[i])
        }
    }
    return ret;
}
三.遍历数组,利用object对象保存数组值,判断数组值是否已经保存在object中,未保存则push到新数组并用object[arrayItem]=1的方式记录保存
var arr3 = [1,2,2,2,3,3,4,4,5]
function removeSame(arr){
    var temp = {},ret = [];
    for (var i = 0,j=arr.length;i<j;i++){
        //debugger;
        console.log(temp[arr[i]]);
        if(!temp[arr[i]]){
            temp[arr[i]] = 1;
            ret.push(arr[i])
        }
    }
    return ret;
}
四.根据数组下标判断法, 遍历数组,利用indexOf()判断元素的值是否与当前索引相等,如相等则加入
var arr4 = ["apple","apple","orange","orange","banana"]
function removeSame(arr){
    var ret = [];
    arr.forEach(function(ele,index){
        if(arr.indexOf(ele) == index){
            ret.push(ele)
        }
    })
    return ret;
}
五.数组先进行排序,然后比较原数组与新数组,一头一尾进行去重
var arr5 = ["apple","apple","orange","orange","banana"]
function removeSame(arr){
    var ret = [],end;
    debugger;
    arr.sort();   // ["apple","apple","banana","orange","orange",];
    end = arr[0];
    ret.push(arr[0]);
    for(var i = 1; i<arr.length; i++){
        if(arr[i] != end){
            ret.push(arr[i]);
            end = arr[i];
        }
    }
    return ret;
}
查看原文

赞 1 收藏 0 评论 0

爱宜淡写Vivan 发布了文章 · 2019-11-27

正则、验证

1.手机号码
var reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
2.银行卡
function bankIdCheck(bankno){
    var lastNum=bankno.substr(bankno.length-1,1);//取出最后一位(与luhn进行比较)

    var first15Num=bankno.substr(0,bankno.length-1);//前15或18位
    var newArr=new Array();
    for(var i=first15Num.length-1;i>-1;i--){    //前15或18位倒序存进数组
        newArr.push(first15Num.substr(i,1));
    }
    var arrJiShu=new Array();  //奇数位*2的积 <9
    var arrJiShu2=new Array(); //奇数位*2的积 >9

    var arrOuShu=new Array();  //偶数位数组
    for(var j=0;j<newArr.length;j++){
        if((j+1)%2==1){//奇数位
            if(parseInt(newArr[j])*2<9)
                arrJiShu.push(parseInt(newArr[j])*2);
            else
                arrJiShu2.push(parseInt(newArr[j])*2);
        }
        else //偶数位
            arrOuShu.push(newArr[j]);
    }

    var jishu_child1=new Array();//奇数位*2 >9 的分割之后的数组个位数
    var jishu_child2=new Array();//奇数位*2 >9 的分割之后的数组十位数
    for(var h=0;h<arrJiShu2.length;h++){
        jishu_child1.push(parseInt(arrJiShu2[h])%10);
        jishu_child2.push(parseInt(arrJiShu2[h])/10);
    }

    var sumJiShu=0; //奇数位*2 < 9 的数组之和
    var sumOuShu=0; //偶数位数组之和
    var sumJiShuChild1=0; //奇数位*2 >9 的分割之后的数组个位数之和
    var sumJiShuChild2=0; //奇数位*2 >9 的分割之后的数组十位数之和
    var sumTotal=0;
    for(var m=0;m<arrJiShu.length;m++){
        sumJiShu=sumJiShu+parseInt(arrJiShu[m]);
    }

    for(var n=0;n<arrOuShu.length;n++){
        sumOuShu=sumOuShu+parseInt(arrOuShu[n]);
    }

    for(var p=0;p<jishu_child1.length;p++){
        sumJiShuChild1=sumJiShuChild1+parseInt(jishu_child1[p]);
        sumJiShuChild2=sumJiShuChild2+parseInt(jishu_child2[p]);
    }
    //计算总和
    sumTotal=parseInt(sumJiShu)+parseInt(sumOuShu)+parseInt(sumJiShuChild1)+parseInt(sumJiShuChild2);

    //计算luhn值
    var k= parseInt(sumTotal)%10==0?10:parseInt(sumTotal)%10;
    var luhn= 10-k;

    if(lastNum==luhn){
        return true;
    }
    else{
        return false;
    }
}
3.残疾人证号
var reg = /^[1-9]\d{5}(18|19|20)\d{2}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([\d|x|X]{1})([1-7]){1}([1-4]){1}$/;
4.正整数
var res = /^\d+$/;
5.身份证
var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
6.邮箱
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
查看原文

赞 2 收藏 1 评论 1

爱宜淡写Vivan 发布了文章 · 2019-11-27

弹出类提示信息

html

javascript

function comMsg(str){
    $(".msg_pop_main p").text(str); 
    var width = $(".msg_pop_main").width();
    var height = $(".msg_pop_main").height();
    $(".msg_pop_main").css({"marginTop":-(height/2),"marginLeft":-(width/2)});
    $(".msg_pop_main").fadeIn();
    setTimeout(function(){  
        $(".msg_pop_main").fadeOut();
    },1500);
}
comMsg("请输入您的名字!");
css
.msg_pop_main {
    background: rgba(0,0,0,0.7);
    max-width: 250px;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1001;
    display: none;
    border-radius: 3px;
    font-size: 12px;
    padding: 10px;
    color: #fff;
}
查看原文

赞 1 收藏 0 评论 0

爱宜淡写Vivan 发布了文章 · 2019-11-27

小程序multiSelector 动态加载数据

项目中需要获取到城市的id,所以小程序自有的region类型就不合适了,需要根据接口动态获取数据

wxml
<picker mode="multiSelector" @change="bindProChange" @columnchange="bindColumnChange" value=0 :range="multiArray" :range-key="'name'">
  <div class="item-right">
    <div class="location-des dealer" v-if="proIndex === ''"></div>
    <div class="location-des dealer" v-else>{{proData[proIndex].name}}, {{cityData[cityIndex].name}}</div>
    <img data-original="../../../static/images/right-arr.png" alt="">
  </div>
</picker>

ps:bindProChange为点击吊起选择器上的确定按钮触发的事件,bindColumnChange为滑动列触发的事件。另小程序使用mpvue开发

javascript
import { getCityData, getProData } from '@/api/main'
data() {
    return{
        proData: [],
        proIndex: '',
        cityData: [],
        cityIndex: '',
        cityId: '',
        multiArray: []
    }
},
async onShow () {
    const res = await getProData({})
    this.proData = res.data.data.area_list
    this.cateList = res.data.data.cate_list
    const ress = await getCityData({pid: this.proData[0].id})
    this.cityData = ress.data.data
    this.multiArray = [[...this.proData], [...this.cityData]]
},
methods: {
    async bindProChange (e) {
      this.proIndex = e.mp.detail.value[0]
      const res = await getCityData({pid: this.proData[this.proIndex].id})
      this.cityData = res.data.data
      this.cityIndex = e.mp.detail.value[1]
      this.cityId = this.cityData[this.cityIndex].id
    },
    async bindColumnChange (e) {
      // 0-省份切换 1-城市切换
      if (e.mp.detail.column === 0) {
        this.proIndex = e.mp.detail.value
        const res = await getCityData({pid: this.proData[this.proIndex].id})
        this.cityData = res.data.data
        this.multiArray = [[...this.proData], [...this.cityData]]
      } else {
        this.cityIndex = e.mp.detail.value
        this.cityId = this.cityData[this.cityIndex].id
      }
    }
}

在类型为multiSelector的选择器,e.mp.detail.column这个值会变为数组类型,其值代表每一列的index。

查看原文

赞 1 收藏 0 评论 0

爱宜淡写Vivan 关注了标签 · 2019-11-20

jquery

jQuery是一套跨浏览器的JavaScript库,强化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上释出第一个版本。目前全球有28%的网站使用jQuery,是目前最受欢迎的JavaScript库。

jQuery免费且为开放源代码,使用GPL和MIT许可证双协议。jQuery的语法设计使得许多操作变容易,如操作文档对象(document)、选择DOM元素、动画效果、事件处理、发展Ajax以及其他功能。除此之外,jQuery提供API让开发者将自己所写的功能融入jQuery内。

微软与诺基亚在2008年9月时宣布,会在他们的平台上自带jQuery。微软同时将jQuery与其开发工具Microsoft Visual Studio集成。

jQuery 1.3版以后,引入全新的CSS选择器引擎Sizzle。同时不再提供Packed版本,因为解压缩的消耗的时间,远大于所节省的下载时间,且不利于Debug,且已有Google AJAX Libraries API等公开站台提供jQuery的js的引用服务,故Packed版本原本的优点已荡然无存。

关注 20510

爱宜淡写Vivan 关注了用户 · 2019-11-20

sunshine1213 @sunshinelina1213

冷眼看世界
热情coding...

关注 3

爱宜淡写Vivan 关注了标签 · 2019-10-22

javascript

JavaScript 是一门弱类型的动态脚本语言,支持多种编程范式,包括面向对象和函数式编程,被广泛用于 Web 开发。

一般来说,完整的JavaScript包括以下几个部分:

  • ECMAScript,描述了该语言的语法和基本对象
  • 文档对象模型(DOM),描述处理网页内容的方法和接口
  • 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

它的基本特点如下:

  • 是一种解释性脚本语言(代码不进行预编译)。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务:

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息

《 Javascript 优点在整个语言中占多大比例?

关注 138926

爱宜淡写Vivan 关注了标签 · 2019-10-22

前端

Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

Web前端优化
  1. 尽量减少HTTP请求 (Make Fewer HTTP Requests)
  2. 减少 DNS 查找 (Reduce DNS Lookups)
  3. 避免重定向 (Avoid Redirects)
  4. 使得 Ajax 可缓存 (Make Ajax Cacheable)
  5. 延迟载入组件 (Post-load Components)
  6. 预载入组件 (Preload Components)
  7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
  8. 切分组件到多个域 (Split Components Across Domains)
  9. 最小化 iframe 的数量 (Minimize the Number of iframes)
  10. 杜绝 http 404 错误 (No 404s)

关注 156863

认证与成就

  • 获得 6 次点赞
  • 获得 0 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 0 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-11-28
个人主页被 291 人浏览