zoukankan      html  css  js  c++  java
  • 小程序 菜单标题滑动底部

    .weui-navbar__slider {
    position: absolute;
    content: " ";
    left: 0;
    bottom: 0;
    70rpx;
    height: 3px;
    ">;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    }
    <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
     
    wx.getSystemInfo({
    success: function (res) {
    console.log(res.windowWidth)
    console.log(that.data.tabs.length)
     
    let sliderWidth = that.data.sliderWidth;
    console.log(sliderWidth)
    that.setData({
    sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2

    });
    }
    });
     
    // 菜单控制函数
    actsureFn: function(e) {
    let that = this;
    let index = e.currentTarget.dataset.index;
    let actsure = index;
    let requestNum1 = this.data.requestNum1;
    let requestNum2 = this.data.requestNum2;

    let shopsAll_zwt = that.data.shopsAll_zwt;
    // console.log(that.data.shopsAll_zwt)

    if (requestNum1 > 0 && actsure == 0) {
    that.homeFn()
    that.homeFn2()
    requestNum1--;
    that.setData({
    requestNum1
    })
    }
    this.setData({
    actsure,
    sliderOffset: e.currentTarget.offsetLeft,
    })
    },
     
     
     
    data{
    tabs:[1,2],
    sliderWidth:145,
    sliderLeft: 0,
    sliderOffset: 105,
  • 相关阅读:
    redis安装
    redis的使用场景和基本数据类型
    (传输层)tcp协议
    async/await
    Promise对象
    对称加密与非对称加密
    Js遍历数组总结
    HTTPS加密传输过程
    HTML节点操作
    Js的new运算符
  • 原文地址:https://www.cnblogs.com/dianzan/p/9371495.html
Copyright © 2011-2022 走看看