小程序下拉显示效果完整代码

2019-08-13

95

 小程序下拉显示效果完整代码,小程序需要下拉显示更多信息的效果,需要的朋友看代码,本人弄好的样式


wxml


<view class="page">

    <view class="nav-son" bindtap="listpx">

        <view>1、怎么量体定制</view>

        <image class="{{jiantou}}" src='../../../../static/images/tabbar/xiala.png'></image>

    </view>

    <view class="temp {{pxopen ? 'slidown' : 'slidup'}} {{pxshow ? 'disappear':''}}">

        <view class="xiangxi">您好,现在我采用的线上量体模式,自主研发了AI智能量体系统,您只要在手机端输入身高、体重,并勾选4项身体特征,比如:腹部,胸部和背部等一些基本身体特征,即可计算出高精度人体净尺寸并映射到一人一版的成衣尺寸,准确度已达到98%以上。</view>

    </view>


    <view class="nav-son" bindtap="listpx2">

        <view>2、定制一件衣服需要多长时间</view>

        <image class="{{jiantou}}" src='../../../../static/images/tabbar/xiala.png'></image>

    </view>

    <view class="temp {{pxopen ? 'slidown' : 'slidup'}} {{pxshow ? 'disappear':''}}">

        <view class="xiangxi">您定制的产品信息在确认后我们就开始安排裁剪制作,衬衫/裤子类产品的工期是7至10个工作日制作完成后发货,外套类产品工期是10至12个工作日,标品类产品的工期是下单后72小时之内发货,制作工期的工作日是不计算周末与国定假日。</view>

    </view>

    <view class="nav-son" bindtap="listpx3">

        <view>3、尺寸不合适怎么办?</view>

        <image class="{{jiantou}}" src='../../../../static/images/tabbar/xiala.png'></image>

    </view>

    <view class="temp {{pxopen ? 'slidown' : 'slidup'}} {{pxshow ? 'disappear':''}}">

        <view class="xiangxi">如果您填写的尺寸有问题,收到衣服尺寸不合适麻烦您不要清洗,尽快联系我们客服帮您核实处理。我们是承诺在您收到货后的15天免费帮您修改或者是重做,后续您寄回的运费也是我们承担,还请您放心。</view>

    </view>

    <view class="nav-son" bindtap="listpx4">

        <view>4、衣服做工、尺寸等不合适,需要退货?</view>

        <image class="{{jiantou}}" src='../../../../static/images/tabbar/xiala.png'></image>

    </view>

    <view class="temp {{pxopen ? 'slidown' : 'slidup'}} {{pxshow ? 'disappear':''}}">

        <view class="xiangxi">如果您填写的尺寸有问题,收到衣服尺寸不合适麻烦您不要清洗,尽快联系我们客服帮您核实处理。我们是承诺在您收到货后的15天免费帮您修改或者是重做,后续您寄回的运费也是我们承担,还请您放心。</view>

    </view>

   

    <view class='kefu'>

      <button class='kf' open-type="contact" bindcontact="handleContact">联系客服</button>

      <view style="font-size:20rpx;width:100%;margin-left: 30%;">如有其他问题,可联系客服(在线时间:8:00-22:00)</view>

    </view>

</view>





css

<view class="page">

    <view class="nav-son" bindtap="listpx">

        <view>1、怎么量体定制</view>

        <image class="{{jiantou}}" src='../../../../static/images/tabbar/xiala.png'></image>

    </view>

    <view class="temp {{pxopen ? 'slidown' : 'slidup'}} {{pxshow ? 'disappear':''}}">

        <view class="xiangxi">您好,现在我采用的线上量体模式,自主研发了AI智能量体系统,您只要在手机端输入身高、体重,并勾选4项身体特征,比如:腹部,胸部和背部等一些基本身体特征,即可计算出高精度人体净尺寸并映射到一人一版的成衣尺寸,准确度已达到98%以上。</view>

    </view>


    <view class="nav-son" bindtap="listpx2">

        <view>2、定制一件衣服需要多长时间</view>

        <image class="{{jiantou}}" src='../../../../static/images/tabbar/xiala.png'></image>

    </view>

    <view class="temp {{pxopen ? 'slidown' : 'slidup'}} {{pxshow ? 'disappear':''}}">

        <view class="xiangxi">您定制的产品信息在确认后我们就开始安排裁剪制作,衬衫/裤子类产品的工期是7至10个工作日制作完成后发货,外套类产品工期是10至12个工作日,标品类产品的工期是下单后72小时之内发货,制作工期的工作日是不计算周末与国定假日。</view>

    </view>

    <view class="nav-son" bindtap="listpx3">

        <view>3、尺寸不合适怎么办?</view>

        <image class="{{jiantou}}" src='../../../../static/images/tabbar/xiala.png'></image>

    </view>

    <view class="temp {{pxopen ? 'slidown' : 'slidup'}} {{pxshow ? 'disappear':''}}">

        <view class="xiangxi">如果您填写的尺寸有问题,收到衣服尺寸不合适麻烦您不要清洗,尽快联系我们客服帮您核实处理。我们是承诺在您收到货后的15天免费帮您修改或者是重做,后续您寄回的运费也是我们承担,还请您放心。</view>

    </view>

    <view class="nav-son" bindtap="listpx4">

        <view>4、衣服做工、尺寸等不合适,需要退货?</view>

        <image class="{{jiantou}}" src='../../../../static/images/tabbar/xiala.png'></image>

    </view>

    <view class="temp {{pxopen ? 'slidown' : 'slidup'}} {{pxshow ? 'disappear':''}}">

        <view class="xiangxi">如果您填写的尺寸有问题,收到衣服尺寸不合适麻烦您不要清洗,尽快联系我们客服帮您核实处理。我们是承诺在您收到货后的15天免费帮您修改或者是重做,后续您寄回的运费也是我们承担,还请您放心。</view>

    </view>

   

    <view class='kefu'>

      <button class='kf' open-type="contact" bindcontact="handleContact">联系客服</button>

      <view style="font-size:20rpx;width:100%;margin-left: 30%;">如有其他问题,可联系客服(在线时间:8:00-22:00)</view>

    </view>

</view>




js


Page({

  data: {

    content: [],

    px: [],

    pxopen: false,

    pxshow: false,

    active: true,

    jiantou: "jiantou_up"

  },

  onLoad: function () {

    this.setData({

      px: ['>默认排序', '>离我最近']

    })

  },

  listpx: function (e) {

    console.log(e)

    if (this.data.pxopen) {

      this.setData({

        pxopen: false,

        pxshow: false,

        active: true,

       jiantou: "jiantou_up"

      })

    } else {

      this.setData({

        content: this.data.px,

        pxopen: true,

        pxshow: false,

        active: false,

        jiantou: "jiantou_down"

      })

    }

    console.log(e.target)

  },


  listpx2: function (e) {

    console.log(e)

    if (this.data.pxopen) {

      this.setData({

        pxopen: false,

        pxshow: false,

        active: true,

        jiantou: "jiantou_up"

      })

    } else {

      this.setData({

        content: this.data.px,

        pxopen: true,

        pxshow: false,

        active: false,

        jiantou: "jiantou_down"

      })

    }

    console.log(e.target)

  }


})

DLweb`build
度良网络科技有限公司为您建设最时尚前沿的网站以及高端网站设计

沪ICP备16017573号

Copyright©2018 度良 All Rights Reserved.

友情链接:

义乌网站建设