广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现车牌键盘
  • 790

0
分享到

微信小程序实现车牌键盘

2024-04-02 19:04:59 790人浏览 薄情痞子
摘要

本文实例为大家分享了微信小程序实现车牌键盘的具体代码，供大家参考，具体内容如下 一、效果图 二、代码 plateNumKeyboard.wxml <view class="p

本文实例为大家分享了微信小程序实现车牌键盘的具体代码，供大家参考，具体内容如下

一、效果图

二、代码

plateNumKeyboard.wxml

<view class="pages">
  <view class="box">
    <view class='box-top'>
      <text>请输入车牌号:</text>
    </view>
 
    <view class="plate-input-body">
      <view class="plate-input-content">
        <view class="{{inputOnFocusIndex=='0'?'plate-nums-foc':'plate-nums-first'}}">
          <text bindtap="inputClick" class="plate-num-text" data-id="0">{{inputPlates.index0}}</text>
        </view>
        <view class="{{inputOnFocusIndex=='1'?'plate-nums-foc':'plate-nums-first'}}">
          <text bindtap="inputClick" class="plate-num-text" data-id="1">{{inputPlates.index1}}</text>
        </view>
        <view class="point-box">
          <image class="point-img" src="../../images/point.png"></image>
        </view>
        <view class="{{inputOnFocusIndex=='2'?'plate-nums-foc':'plate-nums-first'}}">
          <text bindtap="inputClick" class="plate-num-text" data-id="2">{{inputPlates.index2}}</text>
        </view>
        <view class="{{inputOnFocusIndex=='3'?'plate-nums-foc':'plate-nums-first'}}">
          <text bindtap="inputClick" class="plate-num-text" data-id="3">{{inputPlates.index3}}</text>
        </view>
        <view class="{{inputOnFocusIndex=='4'?'plate-nums-foc':'plate-nums-first'}}">
          <text bindtap="inputClick" class="plate-num-text" data-id="4">{{inputPlates.index4}}</text>
        </view>
        <view class="{{inputOnFocusIndex=='5'?'plate-nums-foc':'plate-nums-first'}}">
          <text bindtap="inputClick" class="plate-num-text" data-id="5">{{inputPlates.index5}}</text>
        </view>
        <view class="{{inputOnFocusIndex=='6'?'plate-nums-foc':'plate-nums-first'}}">
          <text bindtap="inputClick" class="plate-num-text" data-id="6">{{inputPlates.index6}}</text>
        </view>
        <view wx:if="{{flag}}" class="plate-nums-first bg1 last" bindtap="showLast">
          +
        </view>
        <view wx:if="{{!flag}}" class="last {{inputOnFocusIndex=='7'?'plate-nums-foc':'plate-nums-first'}}">
          <text bindtap="inputClick" class="plate-num-text" data-id="7">{{inputPlates.index7}}</text>
        </view>
      </view>
    </view>
  </view>
 
 
  <!--键盘-->
  <view class="keyboard" wx:if="{{isKeyboard}}">
    <view class="kb_top">
      <text catchtap="closeKeyBoard" data-index="1"
        style="position:absolute;right:0;display:block;height:74rpx;padding:0 34rpx; color:#03BF70;line-height:74rpx; font-size: 30rpx;">关闭</text>
    </view>
    <view style="width:100%; text-align:center;" wx:if="{{!isNumberKB}}">
      <view style="width:99%;display:flex;text-align:center;margin:0 auto">
        <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}"
          hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx<=9}}" wx:for="{{keyboard1}}"
          wx:for-index="idx" wx:for-item="itemName" wx:key="itemName">
          {{itemName}}
        </view>
      </view>
      <view style="display:flex;text-align:center; width:90%;margin:0 auto">
        <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}"
          hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx<=18&&idx>9}}" wx:for="{{keyboard1}}"
          wx:for-index="idx" wx:for-item="itemName" wx:key="itemName">
          {{itemName}}
        </view>
      </view>
      <view style="display:flex;text-align:center; width:70%;margin:0 auto">
        <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}"
          hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx<=25&&idx>18}}" wx:for="{{keyboard1}}"
          wx:for-index="idx" wx:for-item="itemName" wx:key="itemName">
          {{itemName}}
        </view>
      </view>
      <view style="display:flex; width:50%;margin:0 auto;text-align:center;">
        <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}"
          hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>25}}" wx:for="{{keyboard1}}"
          wx:for-index="idx" wx:for-item="itemName" wx:key="itemName">
          {{itemName}}
        </view>
      </view>
      <view bindtap="tapSpecBtn" class="del-first" data-index="0" hoverClass="del-hover" hoverStartTime="0"
        hoverStayTime="80">
        删除
        <!-- <image class="del-img" data-index="0" mode="scaleToFill" src="../../images/del.png"></image> -->
      </view>
    </view>
    <view style="width:100%; text-align:center;" wx:if="{{isNumberKB}}">
      <view style="width:99%;display:flex;text-align:center;margin:0 auto">
        <view class="td td_num board_bg" wx:if="{{!tapNum&&idx<=9}}" wx:for="{{keyboardNumber}}" wx:for-index="idx"
          wx:for-item="itemName" wx:key="itemName">
          {{itemName}}
        </view>
      </view>
      <view style="width:99%;display:flex;text-align:center;margin:0 auto">
        <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}"
          hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{tapNum&&idx<=9}}"
          wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="itemName">
          {{itemName}}
        </view>
      </view>
      <view style="width:99%;display:flex;text-align:center;margin:0 auto">
        <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}"
          hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>9&&idx<=19}}"
          wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="itemName">
          {{itemName}}
        </view>
      </view>
      <view style="width:99%;display:flex;text-align:center;margin:0 auto">
        <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}"
          hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>19&&idx<=29}}"
          wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="itemName">
          {{itemName}}
        </view>
      </view>
      <view style="width:69%;display:flex;text-align:left; margin-left:5rpx;">
        <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}"
          hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>29&&idx<=33}}"
          wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="itemName">
          {{itemName}}
        </view>
        <view class="td td_num board_bg" wx:if="{{!tapNum&&idx>33}}" wx:for="{{keyboardNumber}}" wx:for-index="idx"
          wx:for-item="itemName" wx:key="itemName">
          {{itemName}}
        </view>
        <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}"
          hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{tapNum&&idx>33}}"
          wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="itemName">
          {{itemName}}
        </view>
      </view>
      <view bindtap="tapSpecBtn" class="del-first" data-index="0" hoverClass="del-hover" hoverStartTime="0"
        hoverStayTime="80">
        删除
        <!-- <image class="del-img" data-index="0" mode="scaleToFill" src="../../images/del.png"></image> -->
      </view>
    </view>
  </view>
</view>

plateNumKeyboard.js

Page({
  data: {
    isKeyboard: 1,
    isNumberKB: !1,
    tapNum: !1,
    disableKey: "1234567890港澳学",
    keyboardNumber: "1234567890ABCDEFGHJKLMNPQRSTUVWXYZ港澳学",
    keyboard1: "京沪粤津冀晋蒙辽吉黑苏浙皖闽赣鲁豫鄂湘桂琼渝川贵云藏陕甘青宁新",
    inputPlates: {
      index0: "",
      index1: "",
      index2: "",
      index3: "",
      index4: "",
      index5: "",
      index6: "",
      index7: ""
    },
    inputOnFocusIndex: "0",
    flag: true
  },
  onLoad: function () {
 
  },
 
  
  onShow: function () {
    this.getHistoryList();
  },
 
  getHistoryList: function () {
    let that = this;
    let data = {
      uNIOnid: app.globalData.unionid,
    }
 
    wxRequest({
      url: app.globalData.url + '/car/history/getByOpenId',
      method: 'get',
      header: {
        "Authorization": app.globalData.token,
      },
      data: data,
    })
      .then((res) => {
        let historyList = res.data.data;
        that.setData({
          historyList,
        })
      })
      .catch((err) => {
        console.log(err);
      });
  },
 
  showLast: function () {
    this.setData({
      flag: false,
    })
  },
 
  setText: function (e) {
    let text = e.currentTarget.dataset.text;
 
    if (text.length == 8) {
      this.setData({
        flag: false,
        'inputPlates.index7': text[7],
      })
    } else {
      this.setData({
        flag: true,
        'inputPlates.index7': "",
      })
    }
    this.setData({
      'inputPlates.index0': text[0],
      'inputPlates.index1': text[1],
      'inputPlates.index2': text[2],
      'inputPlates.index3': text[3],
      'inputPlates.index4': text[4],
      'inputPlates.index5': text[5],
      'inputPlates.index6': text[6],
    })
  },
 
  inputClick: function (t) {
    var that = this;
    that.setData({
      inputOnFocusIndex: t.target.dataset.id,
      isKeyboard: !0
    })
    "0" == this.data.inputOnFocusIndex ? that.setData({
      tapNum: !1,
      isNumberKB: !1
    }) : "1" == this.data.inputOnFocusIndex ? that.setData({
      tapNum: !1,
      isNumberKB: !0
    }) : that.setData({
      tapNum: !0,
      isNumberKB: !0
    });
 
  },
 
  //键盘点击事件
  tapKeyboard: function (t) {
    t.target.dataset.index;
    var a = t.target.dataset.val;
 
    switch (this.data.inputOnFocusIndex) {
      case "0":
        this.setData({
          "inputPlates.index0": a,
          inputOnFocusIndex: "1"
        });
        break;
      case "1":
        this.setData({
          "inputPlates.index1": a,
          inputOnFocusIndex: "2"
        });
        break;
 
      case "2":
        this.setData({
          "inputPlates.index2": a,
          inputOnFocusIndex: "3"
        });
        break;
 
      case "3":
        this.setData({
          "inputPlates.index3": a,
          inputOnFocusIndex: "4"
        });
        break;
 
      case "4":
        this.setData({
          "inputPlates.index4": a,
          inputOnFocusIndex: "5"
        });
        break;
 
      case "5":
        this.setData({
          "inputPlates.index5": a,
          inputOnFocusIndex: "6"
        });
        break;
 
      case "6":
        this.setData({
          "inputPlates.index6": a,
          inputOnFocusIndex: "7"
        });
        break;
 
      case "7":
        if (!this.data.flag) {
          this.setData({
            "inputPlates.index7": a,
            inputOnFocusIndex: "7"
          });
        }
    }
 
    if (this.data.inputOnFocusIndex == "0") {
      this.setData({
        isKeyboard: 1,
        isNumberKB: !1,
        tapNum: !1,
      })
    } else {
      this.setData({
        isKeyboard: 1,
        isNumberKB: 1,
        tapNum: 1,
      })
    }
 
 
  },
 
  closeKeyBoard: function () {
    this.setData({
      isKeyboard: false,
    })
  },
  //键盘关闭按钮点击事件
  tapSpecBtn: function () {
    if (this.data.inputOnFocusIndex == "0") {
      this.setData({
        isKeyboard: 1,
        isNumberKB: !1,
        tapNum: !1,
      })
    } else {
      this.setData({
        isKeyboard: 1,
        isNumberKB: 1,
        tapNum: 1,
      })
    }
 
    switch (parseInt(this.data.inputOnFocusIndex)) {
      case 0:
        this.setData({
          "inputPlates.index0": "",
          inputOnFocusIndex: "0",
        });
        break;
 
      case 1:
        if (this.data.inputPlates.index1) {
          this.setData({
            "inputPlates.index1": "",
            inputOnFocusIndex: "1"
          });
        } else {
          this.setData({
            "inputPlates.index0": "",
            "inputPlates.index1": "",
            inputOnFocusIndex: "0",
          });
        }
        break;
 
      case 2:
        if (this.data.inputPlates.index2) {
          this.setData({
            "inputPlates.index2": "",
            inputOnFocusIndex: "2"
          });
        } else {
          this.setData({
            "inputPlates.index1": "",
            "inputPlates.index2": "",
            inputOnFocusIndex: "1"
          });
        }
        break;
 
      case 3:
        if (this.data.inputPlates.index3) {
          this.setData({
            "inputPlates.index3": "",
            inputOnFocusIndex: "3"
          });
        } else {
          this.setData({
            "inputPlates.index2": "",
            "inputPlates.index3": "",
            inputOnFocusIndex: "2"
          });
        }
        break;
 
      case 4:
        if (this.data.inputPlates.index4) {
          this.setData({
            "inputPlates.index4": "",
            inputOnFocusIndex: "4"
          });
        } else {
          this.setData({
            "inputPlates.index3": "",
            "inputPlates.index4": "",
            inputOnFocusIndex: "3"
          });
        }
        break;
 
      case 5:
        if (this.data.inputPlates.index5) {
          this.setData({
            "inputPlates.index5": "",
            inputOnFocusIndex: "5"
          });
        } else {
          this.setData({
            "inputPlates.index4": "",
            "inputPlates.index5": "",
            inputOnFocusIndex: "4"
          });
        }
        break;
 
      case 6:
        if (this.data.inputPlates.index6) {
          this.setData({
            "inputPlates.index6": "",
            inputOnFocusIndex: "6"
          });
        } else {
          this.setData({
            "inputPlates.index5": "",
            "inputPlates.index6": "",
            inputOnFocusIndex: "5"
          });
        }
        break;
 
      case 7:
        if (this.data.inputPlates.index7) {
          this.setData({
            "inputPlates.index7": "",
            inputOnFocusIndex: "7"
          });
        } else {
          this.setData({
            "inputPlates.index6": "",
            "inputPlates.index7": "",
            inputOnFocusIndex: "6",
            flag: true,
          });
        }
    }
 
  },
 
 
})

plateNumKeyboard.wxss

.box {
  width: 690rpx;
  margin: 0 auto;
  margin-top: 24rpx;
  height: 260rpx;
  background-color: rgb(237, 245, 255);
  border: 2rpx solid rgb(230, 241, 255);
  border-radius: 4rpx;
}
 
.box-top {
  width: 650rpx;
  margin: 0 auto;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: rgb(70, 145, 255);
  font-weight: bold;
  border-bottom: 4rpx solid rgb(218, 235, 255);
  font-size: 28rpx;
}
 
 
.plate-input-body {
  
  height: 100rpx;
  margin: 30rpx auto;
  width: 650rpx;
}
 
.plate-input-content {
  display: flex;
  flex-direction: row;
  height: 100rpx;
}
 
 
.plate-nums-foc {
  flex: 1;
  border: 2rpx solid rgb(119, 179, 255);
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
  border-radius: 4rpx;
}
 
.plate-nums-first {
  flex: 1;
  border: 2rpx solid #ccc;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
  border-radius: 4rpx;
}
 
.point-box {
  width: 40rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.point-img {
  width: 16rpx;
  height: 16rpx;
}
 
.bg1 {
  background-color: rgb(177, 212, 255);
  justify-content: center;
  color: rgb(55, 145, 255);
  border: 2rpx dashed rgb(119, 179, 255);
}
 
.plate-num-text {
  flex: 1;
  line-height: 100rpx;
  height: 100%;
  box-sizing: border-box;
  border-radius: 4rpx;
  font-size: 40rpx;
  font-weight: nORMal;
}
 
.last{
  margin-right: 0;
}
 
 
.text {
  margin: 20rpx auto;
  width: 254rpx;
  color: rgb(255, 99, 85);
  font-size: 24rpx;
}
 
.kb_top {
  align-content: relative;
  width: 100%;
  height: 74rpx;
  background: #fff;
  border-top: solid #ebebeb 2rpx;
  border-bottom: 15rpx solid #d7d8dc;
}
 
.keyboard {
  z-index: 9999;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: #d7d8dc;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 15rpx solid #d7d8dc;
}
 
.td {
  font-family: "微软雅黑";
  flex-grow: 1;
  text-align: center;
  font-size: 34rpx;
  height: 86rpx;
  line-height: 80rpx;
  background: #fff;
  margin: 10rpx 5rpx;
  color: #333;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  box-shadow: 0rpx 2rpx 0rpx #a9a9a9;
}
 
.td_nor {
  flex: 1 1 6%;
}
 
.td_num {
  flex: 1 1 8%;
}
 
.td_spec {
  flex: 1 1 12%;
}
 
.board_bg {
  box-shadow: 0 0 0 #e5e5e5;
  background: #e5e5e5;
}
 
.del-first {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  width: 137rpx;
  height: 86rpx;
  background-color: #fff;
  box-shadow: 0rpx 2rpx 0rpx #a9a9a9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
  color: rgb(240, 110, 79);
 
}
 
.del-hover {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  width: 137rpx;
  height: 86rpx;
  background-color: #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
  box-shadow: 0 0 0 #e5e5e5;
}
 
.del-img {
  display: block;
  width: 46rpx;
  height: 38rpx;
}

plateNumKeyboard.JSON

{
  "navigationBarTitleText": "车牌键盘"
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 微信小程序实现车牌键盘

本文链接: https://www.lsjlt.com/news/153833.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 微信小程序实现车牌键盘
    本文实例为大家分享了微信小程序实现车牌键盘的具体代码，供大家参考，具体内容如下 一、效果图 二、代码 plateNumKeyboard.wxml <view class="p...
    99+
    2022-11-13
  • 微信小程序如何实现车牌键盘
    这篇文章主要介绍“微信小程序如何实现车牌键盘”，在日常操作中，相信很多人在微信小程序如何实现车牌键盘问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序如何实现车牌键盘”的疑惑有所帮助！接下来，请跟着小编...
    99+
    2023-07-02
  • 停车小程序车牌键盘如何开发
    这篇文章主要介绍“停车小程序车牌键盘如何开发”，在日常操作中，相信很多人在停车小程序车牌键盘如何开发问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”停车小程序车牌键盘如何开发”的疑惑有所帮助！接下来，请跟着小编...
    99+
    2023-06-26
  • 微信小程序中实现车牌输入功能
    目录前言背景大猜想找规律结构和样式组件实现参数键盘类型的判断获取输入内容组件传参组件使用测试解决键盘类型判断的bug结束语组件的代码使用页面代码前言 哈哈哈，上新文章啦。好久没有更...
    99+
    2022-11-12
  • 微信小程序实现翻牌小功能
    本文实例为大家分享了微信小程序翻牌小功能，供大家参考，具体内容如下 页面 <view id="container">     <view wx:for="{{new...
    99+
    2022-11-13
  • 微信小程序实现购物车页面
    微信小程序实现购物车页面，供大家参考，具体内容如下 先来弄清楚购物车的需求。 单选、全选和取消，而且会随着选中的商品计算出总价单个商品购买数量的增加和减少删除商品。当购物车为空时，...
    99+
    2022-11-13
  • 共享停车位小程序,微信小程序停车场车位,微信小程序停车场系统毕设作品
        项目背景和意义   目的：首先，在社会上“停车难”是一个众所周知的问题，每个小区，每个大厦都有自己的停车场，但是在没有进入停车场之前，我们没办法知道是否有空车位，空车位在哪个地方。为了解决这个问题我们打算做一个停车场车位预约...
    99+
    2023-10-07
    共享停车位小程序
  • 微信小程序如何实现翻牌小游戏
    这篇文章主要介绍了微信小程序如何实现翻牌小游戏，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体内容如下一、新建一个quick start项...
    99+
    2022-10-19
  • 微信小程序怎么实现翻牌小功能
    本篇内容介绍了“微信小程序怎么实现翻牌小功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！页面<view id="...
    99+
    2023-06-30
  • 微信小程序中如何实现购物车
    这篇文章给大家分享的是有关微信小程序中如何实现购物车的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。先上效果图购物车实现cart.wxml<import src=&...
    99+
    2022-10-19
  • 微信小程序实现简单购物车小功能
    本文实例为大家分享了微信小程序实现简单购物车的具体代码，供大家参考，具体内容如下 微信小程序定制好看的购物车页面，实现购物车功能，希望对您有所帮助！ 1. 应用场景2. 思路分析3....
    99+
    2022-11-13
  • 微信小程序实现一键登录
    本文实例为大家分享了微信小程序实现手机号登录的具体代码，供大家参考，具体内容如下 项目需求 点击按钮获取用户电话号码绑定到后台，登录。 实现思路 1、使用微信开放功能为获取用户手机...
    99+
    2022-11-13
  • 微信小程序如何实现调起键盘性能优化
    这篇文章主要介绍微信小程序如何实现调起键盘性能优化，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！在小程序中，我们经常有调起键盘的操作场景，但是在不同的场景下解决方案不尽相同，还是需要...
    99+
    2022-10-19
  • 微信小程序实现九宫格翻牌动画
    本文实例为大家分享了微信小程序实现九宫格翻牌的具体代码，供大家参考，具体内容如下 9宫格翻牌需求： 1.进来时平铺9个格子显示 2.点击开始抽奖时洗牌动作 3.洗完牌后呈现9个都是...
    99+
    2022-11-13
  • 微信小程序中如何实现购物车功能
    小编给大家分享一下微信小程序中如何实现购物车功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！需求先来弄清楚购物车的需求。单选、...
    99+
    2022-10-19
  • 微信小程序实现简单的购物车功能
    本文实例为大家分享了微信小程序实现简单购物车的具体代码，供大家参考，具体内容如下 实现一个购物车页面，需要哪些数据。整理下大概如下：一个购物车商品列表(carts)，列表里的单个it...
    99+
    2022-11-13
  • 【微信小程序】实现微信小程序登录(附源码)
    实现微信小程序登录 文章目录 实现微信小程序登录登录功能简介界面展示代码展示 登录功能简介 通过点击登录按钮，调用微信接口wx.getUserProfile拿到微信的个人信息，先检查是...
    99+
    2023-09-07
    微信小程序 小程序 微信 前端
  • 微信小程序转盘抽奖的实现方法
    本文实例为大家分享了微信小程序实现转盘抽奖的具体代码，供大家参考，具体内容如下 lucky-draw.wxss： .lucky_draw_zp{ width: 502rpx; hei...
    99+
    2022-11-13
  • 微信小程序怎么实现抽奖大转盘
    这篇“微信小程序怎么实现抽奖大转盘”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序怎么实现抽奖大转盘”文章吧。界面就...
    99+
    2023-06-26
  • 微信小程序调起键盘性能优化的方法
    本篇内容主要讲解“微信小程序调起键盘性能优化的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微信小程序调起键盘性能优化的方法”吧!需求分析最近在项目中有一个需求，是从列表页点击评论按钮进入详...
    99+
    2023-06-26
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作