微信小程序?qū)崿F(xiàn)簡單購物車小功能
更新時間：2022年07月20日 09:17:00 作者：風(fēng)澤木
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡單購物車小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)簡單購物車的具體代碼，供大家參考，具體內(nèi)容如下
微信小程序定制好看的購物車頁面，實現(xiàn)購物車功能，希望對您有所幫助！
1. 應(yīng)用場景
2. 思路分析
3. 代碼分析
4. 具體實現(xiàn)代碼
效果截圖：
1.應(yīng)用場景
適用于商城、秒殺、商品購買等類型的小程序，負(fù)責(zé)將顧客瀏覽的商品保存下來，方便客戶集中比較商品與購買商品。
2.思路分析
實現(xiàn)購物車功能前請思考以下問題：
1.小程序如何布局？使用什么布局能提升頁面開發(fā)效率？？
2.將購物車功能分為四個小功能：(1)一鍵全選/取消商品 （2）動態(tài)添加商品可手動輸入 （3）計算結(jié)算商品金額 （4）左滑動刪除商品
答：（1）在小程序中主要是兼容安卓與ios兩種型號手機，在頁面開發(fā)中可使用flex布局，能極大的提高頁面的開發(fā)效率。（2）請仔細(xì)閱讀代碼分析，看懂自己也可輕松實現(xiàn)購物車功能 so easy?。?！
3.代碼分析
1. 一鍵全選/取消
allSelect: function (e) {
? ? var that = this
? ? var allSelect = e.currentTarget.dataset.select//判斷是否選中 circle是 success否
? ? var newList = that.data.slideProductList
? ? if (allSelect == "circle") {
? ? ? for (var i = 0; i < newList.length; i++) {
? ? ? ? newList[i].select = "success"
? ? ? }
? ? ? var select = "success"
? ? } else {
? ? ? for (var i = 0; i < newList.length; i++) {
? ? ? ? newList[i].select = "circle"
? ? ? }
? ? ? var select = "circle"
? ? }
? ? that.setData({
? ? ? slideProductList: newList,
? ? ? allSelect: select
? ? })
? ? that.countNum()//計算商品數(shù)量
? ? that.count()//計算商品金額
? },2. 動態(tài)添加商品可手動輸入
a 添加商品
addtion: function (e) {//添加商品
? ? var that = this
? ? var index = e.currentTarget.dataset.index
? ? var num = e.currentTarget.dataset.num
? ? if (num < 99) { //默認(rèn)峰值99件
? ? ? num++
? ? }
? ? var newList = that.data.slideProductList
? ? newList[index].num = num
? ? that.setData({
? ? ? goodsNum:num,
? ? ? slideProductList: newList
? ? })
? ? that.countNum()
? ? that.count()
? },b 減少商品
subtraction: function (e) {//減少商品
? ? var that = this
? ? var index = e.currentTarget.dataset.index
? ? var num = e.currentTarget.dataset.num
? ? var newList = that.data.slideProductList
? ? //當(dāng)1件時，再次點擊移除該商品
? ? if (num == 1) {
? ? ? newList.splice(index, 1)
? ? } else {
? ? ? num--
? ? ? newList[index].num = num
? ? }
? ? that.setData({
? ? ? goodsNum: num,
? ? ? slideProductList: newList
? ? })
? ? that.countNum()
? ? that.count()
? },c 直接輸入
inputNum:function(e){
? ? var num = e.detail.value;
? ? this.setData({goodsNum:num})
? },
? numIputBlur:function(e){
? ? var that = this;
? ? var num = that.data.goodsNum;
? ? var index = e.currentTarget.dataset.index;
? ? var newList = that.data.slideProductList
? ? if (num == "") { //判空
? ? ? newList[index].num = 1;
? ? ? that.setData({
? ? ? ? slideProductList: newList
? ? ? })
? ? }else if (num < 1) {
? ? ? that.setData({
? ? ? ? goodsNum: newList[index].num,
? ? ? ? slideProductList: newList
? ? ? })
? ? ? wx.showToast({
? ? ? ? title: '親，該寶貝不能減少了哦~',
? ? ? ? icon: 'none'
? ? ? })
? ? }else if(num>99){
? ? ? that.setData({
? ? ? ? goodsNum: newList[index].num,
? ? ? ? slideProductList: newList
? ? ? })
? ? ? wx.showToast({
? ? ? ? title: '親，該寶貝最多購買99件哦~',
? ? ? ? icon: 'none'
? ? ? })
? ? }else{
? ? ? newList[index].num = num;
? ? ? that.setData({
? ? ? ? slideProductList: newList
? ? ? })
? ? }
? ? that.countNum()
? ? that.count()
? },3. 計算結(jié)算商品金額
count: function () {//計算金額方法
? ? var that = this
? ? var newList = that.data.slideProductList
? ? var newCount = 0
? ? for (var i = 0; i < newList.length; i++) {
? ? ? if (newList[i].select == "success") {
? ? ? ? newCount += newList[i].num * newList[i].price
? ? ? }
? ? }
? ? that.setData({
? ? ? count: newCount
? ? })
? }, 4. 頁面左滑動刪除商品
功能后續(xù)整理
4. 具體實現(xiàn)代碼
1.wxml
<view class="product-container">
?? ?<view class="product-list" style='height:{{height}}px'>
?? ??? ?<view class="product-item" wx:for="{{slideProductList}}" wx:for-index="index" wx:key='slideProductList'>
?? ??? ??? ?<slide-delete pid="{{item.id}}" bindaction="handleSlideDelete" wx:key='slideProductList'>
?? ??? ??? ??? ?<view class="product-item-wrap">
?? ??? ??? ??? ??? ?<icon type="{{item.select}}" size="19" data-index="{{index}}" data-select="{{item.select}}" bindtap="change" color="red" />
?? ??? ??? ??? ??? ?<view class="product_img">
?? ??? ??? ??? ??? ??? ?<image src="{{item.url}}" class='goods-img' mode="widthFix"></image>
?? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ??? ?<view class="product-movable-item">
?? ??? ??? ??? ??? ??? ?<view class="goods-name">{{item.name}}</view>
?? ??? ??? ??? ??? ??? ?<view class="goods-type">最新款
?? ??? ??? ??? ??? ??? ??? ?<text>{{item.style}}</text>
?? ??? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ??? ??? ?<view class="goods-price">￥{{item.price}}</view>
?? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ??? ?<view class="product-movable-item product-movable-item-amount">
?? ??? ??? ??? ??? ??? ?<view class="num-box">
?? ??? ??? ??? ??? ??? ??? ?<view class="btn-groups">
?? ??? ??? ??? ??? ??? ??? ??? ?<button class="goods-btn btn-minus" data-index="{{index}}" data-num="{{item.num}}" bindtap="subtraction">—</button>
?? ??? ??? ??? ??? ??? ??? ??? ?<input class='num' type='number' data-index="{{index}}" bindblur="numIputBlur" bindinput='inputNum' value='{{item.num}}'></input>
?? ??? ??? ??? ??? ??? ??? ??? ?<button class="goods-btn btn-add" data-index="{{index}}" data-num="{{item.num}}" bindtap="addtion">+</button>
?? ??? ??? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ?</view>
?? ??? ??? ?</slide-delete>
?? ??? ?</view>
?? ?</view>
?? ?<view class="cart-fixbar">
?? ??? ?<view class="allSelect">
?? ??? ??? ?<icon type="{{allSelect}}" size="19" data-select="{{allSelect}}" bindtap="allSelect" color='#fff' />
?? ??? ??? ?<view class="allSelect-text">全選</view>
?? ??? ?</view>
?? ??? ?<view class="count">
?? ??? ??? ?<text>合計：</text>￥{{count}}
?? ??? ?</view>
?? ??? ?<view class="order">
?? ??? ??? ?<view class="orders">
?? ??? ??? ??? ?去結(jié)算
?? ??? ??? ??? ?<text class="allnum">({{num}})</text>
?? ??? ??? ?</view>
?? ??? ?</view>
?? ?</view>
</view>
<view class="footer">
?? ?<navigator class="ft_item" url="../shoping/shoping" hover-class="none" open-type='redirect'>
?? ??? ?<image src="../../image/sy_1.png"></image>
?? ??? ?<view class="item_title">首頁</view>
?? ?</navigator>
?? ?<navigator url="../classification/classification" hover-class="none" open-type='redirect' class="ft_item">
?? ??? ?<image src="../../image/fl_1.png"></image>
?? ??? ?<view class="item_title">分類</view>
?? ?</navigator>
?? ?<view class="ft_item">
?? ??? ?<image src="../../image/gwc.png"></image>
?? ??? ?<view class="item_title">購物車</view>
?? ?</view>
?? ?<navigator hover-class="none" url="../my/my" open-type='redirect' class="ft_item">
?? ??? ?<image src="../../image/gr_1.png"></image>
?? ??? ?<view class="item_title">我的</view>
?? ?</navigator>
</view>2.js
const app = getApp()
Page({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? goodsNum:'',
? ? userInfo: {},
? ? hasUserInfo: false,
? ? canIUse: wx.canIUse('button.open-type.getUserInfo'),
? ? slideProductList: [
? ? ? {
? ? ? ? id:1,
? ? ? ? name: '智能手環(huán)1111111112222211',
? ? ? ? url: "../../image/bracelet.jpg",
? ? ? ? style: "2代",
? ? ? ? price: "149.5",
? ? ? ? select: "circle",
? ? ? ? num: "1",
? ? ? ? code: "0001",
? ? ? ? amount: 500
? ? ? },
? ? ? {
? ? ? ? id: 2,
? ? ? ? name: "指環(huán)支架",
? ? ? ? url: "../../image/ring.jpg",
? ? ? ? style: "金色",
? ? ? ? price: "19.9",
? ? ? ? select: "circle",
? ? ? ? code: "0002",
? ? ? ? num: "1",
? ? ? ? amount: 500
? ? ? },
? ? ? {
? ? ? ? id: 3,
? ? ? ? name: "新款平板電腦",
? ? ? ? url: "../../image/iphone.png",
? ? ? ? style: "9.7英寸",
? ? ? ? price: "100",
? ? ? ? select: "circle",
? ? ? ? code: "0003",
? ? ? ? num: "1",
? ? ? ? amount: 110
? ? ? },
? ? ? {
? ? ? ? id: 4,
? ? ? ? code: "0001",
? ? ? ? name: "無人機",
? ? ? ? url: "../../image/uav.jpg",
? ? ? ? style: "低配版",
? ? ? ? price: "4999",
? ? ? ? select: "circle",
? ? ? ? code: "0004",
? ? ? ? num: "1",
? ? ? ? amount: 200
? ? ? },
? ? ? {
? ? ? ? id: 5,
? ? ? ? code: "0001",
? ? ? ? name: "無人機",
? ? ? ? url: "../../image/uav.jpg",
? ? ? ? style: "低配版",
? ? ? ? price: "4999",
? ? ? ? select: "circle",
? ? ? ? code: "0004",
? ? ? ? num: "1",
? ? ? ? amount: 200
? ? ? },
? ? ? {
? ? ? ? id: 6,
? ? ? ? code: "0001",
? ? ? ? name: "無人機",
? ? ? ? url: "../../image/uav.jpg",
? ? ? ? style: "低配版",
? ? ? ? price: "4999",
? ? ? ? select: "circle",
? ? ? ? code: "0004",
? ? ? ? num: "1",
? ? ? ? amount: 200
? ? ? },
? ? ],
? ? allSelect: "circle",
? ? num: 0,
? ? count: 0,
? ? lastX: 0,
? ? lastY: 0,
? ? text: "沒有滑動",
? ?
? },
? change: function (e) {
? ? var that = this
? ? var index = e.currentTarget.dataset.index
? ? var select = e.currentTarget.dataset.select
? ? if (select == "circle") {
? ? ? var stype = "success"
? ? } else {
? ? ? var stype = "circle"
? ? }
? ? var newList = that.data.slideProductList
? ? newList[index].select = stype
? ? that.setData({
? ? ? slideProductList: newList
? ? })
? ? that.countNum()
? ? that.count()
? },
? addtion: function (e) {
? ? var that = this
? ? var index = e.currentTarget.dataset.index
? ? var num = e.currentTarget.dataset.num
? ? //默認(rèn)99件
? ? if (num < 99) {
? ? ? num++
? ? }
? ? var newList = that.data.slideProductList
? ? newList[index].num = num
? ? that.setData({
? ? ? goodsNum:num,
? ? ? slideProductList: newList
? ? })
? ? that.countNum()
? ? that.count()
? },
? inputNum:function(e){
? ? var num = e.detail.value;
? ? this.setData({
? ? ? goodsNum:num
? ? })
? },
? numIputBlur:function(e){
? ? var that = this
? ? var num = that.data.goodsNum
? ? var index = e.currentTarget.dataset.index
? ? var newList = that.data.slideProductList
? ? if (num == "") { //盤空
? ? ? newList[index].num = 1;
? ? ? that.setData({
? ? ? ? slideProductList: newList
? ? ? })
? ? }else if (num < 1) {
? ? ? that.setData({
? ? ? ? goodsNum: newList[index].num,
? ? ? ? slideProductList: newList
? ? ? })
? ? ? wx.showToast({
? ? ? ? title: '親，該寶貝不能減少了哦~',
? ? ? ? icon: 'none'
? ? ? })
? ? }else if(num>99){
? ? ??
? ? ? that.setData({
? ? ? ? goodsNum: newList[index].num,
? ? ? ? slideProductList: newList
? ? ? })
? ? ? wx.showToast({
? ? ? ? title: '親，該寶貝最多購買99件哦~',
? ? ? ? icon: 'none'
? ? ? })
? ? }else{
? ? ? newList[index].num = num;
? ? ? that.setData({
? ? ? ? slideProductList: newList
? ? ? })
? ? }
? ? that.countNum()
? ? that.count()
? },
? //減法
? subtraction: function (e) {
? ? var that = this
? ? var index = e.currentTarget.dataset.index
? ? var num = e.currentTarget.dataset.num
? ? var newList = that.data.slideProductList
? ??
? ? if (num == 1) {//當(dāng)數(shù)量為1件時，再次點擊移除該商品
? ? ? newList.splice(index, 1)
? ? } else {
? ? ? num--
? ? ? newList[index].num = num
? ? }
? ? that.setData({
? ? ? goodsNum: num,
? ? ? slideProductList: newList
? ? })
? ? that.countNum()
? ? that.count()
? },
? //全選
? allSelect: function (e) {
? ? var that = this
? ? var allSelect = e.currentTarget.dataset.select //先判斷是否選中
? ? var newList = that.data.slideProductList
? ? console.log(newList)
? ? if (allSelect == "circle") {
? ? ? for (var i = 0; i < newList.length; i++) {
? ? ? ? newList[i].select = "success"
? ? ? }
? ? ? var select = "success"
? ? } else {
? ? ? for (var i = 0; i < newList.length; i++) {
? ? ? ? newList[i].select = "circle"
? ? ? }
? ? ? var select = "circle"
? ? }
? ? that.setData({
? ? ? slideProductList: newList,
? ? ? allSelect: select
? ? })
? ? that.countNum()
? ? that.count()
? },
?
? countNum: function () { //計算數(shù)量
? ? var that = this
? ? var newList = that.data.slideProductList
? ? var allNum = 0
? ? for (var i = 0; i < newList.length; i++) {
? ? ? if (newList[i].select == "success") {
? ? ? ? allNum += parseInt(newList[i].num)
? ? ? }
? ? }
? ? parseInt
? ? that.setData({
? ? ? num: allNum
? ? })
? },
??
? count: function () {//計算金額方法
? ? var that = this
? ? var newList = that.data.slideProductList
? ? var newCount = 0
? ? for (var i = 0; i < newList.length; i++) {
? ? ? if (newList[i].select == "success") {
? ? ? ? newCount += newList[i].num * newList[i].price
? ? ? }
? ? }
? ? that.setData({
? ? ? count: newCount
? ? })
? },
??
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {
? ? var width=wx.getSystemInfoSync().windowWidth
? ? var height=wx.getSystemInfoSync().windowHeight
? ? height=height-55-53;
? ? this.setData({
? ? ? height:height
? ? })
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function () {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function () {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function () {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function () {
? },
? /**
? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
? ?*/
? onPullDownRefresh: function () {
? },
? /**
? ?* 頁面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {
? },
? /**
? ?* 用戶點擊右上角分享
? ?*/
? onShareAppMessage: function () {
? }
})3.wxss
.cart-box .item {display:flex;flex-direction:row;align-items:center;padding:20rpx;border-top:8rpx solid #f0f3fa;}
.cart-box .item .goods-info {margin-left:20rpx;}
.goods-img {width:160rpx;margin-left:20rpx;height:160rpx;}
.cart-box .row {color:#fff;display:flex;flex-direction:row;width:430rpx;justify-content:space-between;margin-bottom:10rpx;}
.goods-name {font-size:32rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;padding-bottom:10rpx;width:290rpx;}
.goods-price {font-size:32rpx;color:#e02e24;position:relative;top:14rpx;}
.goods-type {color:#999;font-size:24rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:240rpx;padding-bottom:10rpx;}
.num-box {display:flex;flex-direction:row;justify-content:flex-end;position:relative;top:6rpx;}
.goods-btn {width:44rpx;height:44rpx;padding:0;line-height:40rpx;font-weight:400;color:#fff;margin:0;background:#e60a30;border-radius:50%;}
.num {color:#999;width:50rpx;margin-left:5rpx;margin-right:5rpx;text-align:center;line-height:50rpx;font-size:30rpx;}
.btn-add {font-size:36rpx;}
.btn-minus {font-size:18rpx;background:#f8babb;}
.btn-groups {display:flex;flex-direction:row;justify-content:flex-end;background:#f4f4f4;padding:2rpx;border-radius:10rpx;}
.cart-fixbar {position:fixed;bottom:113rpx;background:#e60a30;height:106rpx;width:95%;margin:0 20rpx;display:flex;flex-direction:row;align-items:center;border-top-left-radius:20rpx;border-top-right-radius:20rpx;}
.cart-box .item:last-child {border-bottom:8rpx solid #f0f3fa;}
.cart-fixbar .allSelect {display:flex;flex-direction:row;height:106rpx;align-items:center;color:#fff;font-size:32rpx;margin-left:20rpx;}
.cart-fixbar .allSelect-text {margin-left:16rpx;font-size:28rpx;}
.cart-fixbar .count {color:#fff;font-size:36rpx;position:absolute;right:220rpx;display:flex;align-items:center;}
.cart-fixbar .count text {font-size:28rpx;}
.cart-fixbar .order {color:#e02e24;height:58rpx;background:#fff;line-height:58rpx;position:absolute;right:0;margin:0 20rpx;font-size:28rpx;border-radius:10rpx;}
.cart-fixbar .orders {padding:0 18rpx;}
.cart-fixbar .allnum {font-size:28rpx;}
.row_boxs {display:flex;align-items:center;}
.goods-type {flex:1;}
.goods-type text {padding-right:10rpx;}
.section {padding-bottom:220rpx;}
.footer {border-top:1rpx solid #eee;position:fixed;bottom:0;width:100%;display:flex;background:#fff;font-size:24rpx;height:55px;align-items:center;}
.footer .ft_item {width:25%;text-align:center;}
.footer .ft_item image {width:44rpx;height:44rpx;margin-top:10rpx;}
.footer .ft_item:nth-child(3) .item_title {color:#e60a30;}
.section_img {width:110rpx;height:110rpx;}
.section_boxs {text-align:center;margin:50% auto 0;}
.cart-box_p,.section_p {text-align:center;font-size:26rpx;padding-top:10rpx;color:#999;}
.cart-box_p {padding-top:60rpx;}
.cart-box_p text {border:1rpx solid #eee;padding:10rpx 24rpx;letter-spacing:1rpx;}
.title {margin:60rpx 0 30rpx;font-size:40rpx;text-align:center;font-weight:bold;color:#383a3d;}
.product-list .product-item {position:relative;width:100vw;border-bottom:10rpx solid #f0f3fa;box-sizing:border-box;background:#fff;z-index:999;}
.slide-product-list .slide-product-item {position:relative;width:100vw;border-bottom:2rpx solid #e9e9e9;box-sizing:border-box;background:#fff;z-index:999;}
.product-list .product-item movable-area {height:120rpx;width:calc(100vw - 120rpx);}
.product-list .product-item movable-view {height:120rpx;width:100vw;background:#fff;z-index:999;}
.product-list .product-item:first-child {border-top:10rpx solid #f0f3fa;}
.product-list .product-item .delete-btn {position:absolute;top:0;bottom:0;right:0;width:120rpx;font-family:PingFangSC-Regular;font-size:24rpx;color:#fff;line-height:120rpx;z-index:1;background:#e66671;text-align:center;}
.product-list .product-item-wrap {position:relative;display:flex;align-items:center;padding:8rpx 0 20rpx 20rpx;box-sizing:border-box;}
.product-list .product-item-wrap .product-movable-item {flex:1;/* overflow:hidden;*/}
.product-list .product-item-wrap .product-movable-item-name {font-family:PingFangSC-Regular;font-size:28rpx;color:#71747a;line-height:60rpx;margin-right:10rpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.product-list .product-item-wrap .product-movable-item-code {font-family:PingFangSC-Regular;font-size:24rpx;color:#969aa3;}
.product-list .product-item-wrap .product-movable-item-amount {flex:1;padding-right:50rpx;position:relative;}
.product-list .product-item-wrap .product-movable-item-amount .amount {width:120rpx;font-size:28rpx;color:#383a3d;line-height:60rpx;}
.product-list .product-item-wrap .product-movable-item-amount .unit {position:absolute;top:0;right:30rpx;font-size:28rpx;color:#969aa3;line-height:60rpx;}
.product_img {display:flex;align-items:center;padding-right:20rpx;}
.product-list {display:block;overflow-y:auto;}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS實現(xiàn)根據(jù)指定值刪除數(shù)組中的元素操作示例
這篇文章主要介紹了JS實現(xiàn)根據(jù)指定值刪除數(shù)組中的元素操作,結(jié)合實例形式總結(jié)分析了JavaScript針對數(shù)組元素刪除操作的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了純js代碼實現(xiàn)簡單計算器，功能超簡單，實現(xiàn)加減乘除簡單運算，感興趣的小伙伴們可以參考一下2015-12-12
JavaScript實現(xiàn)查找字符串中第一個不重復(fù)的字符
這篇文章主要介紹了JavaScript實現(xiàn)查找字符串中第一個不重復(fù)的字符,需要的朋友可以參考下2014-12-12
利用offsetParent屬性在Dom層次中逐級向上回溯，將每個層次偏移量合計,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了javascript按鈕禁用和啟用的效果實例代碼,需要的朋友可以參考下2017-10-10
JavaScript代碼輕松實現(xiàn)網(wǎng)頁內(nèi)容禁止復(fù)制(代碼簡單)
有些時候我們寫的內(nèi)容不想被別人復(fù)制，在代碼中怎么實現(xiàn)的呢？下面小編給大家介紹javascript代碼輕松實現(xiàn)網(wǎng)頁內(nèi)容禁止復(fù)制，感興趣的童鞋一起看看吧2015-10-10
頁面上，用戶會有很多的操作 ，每進(jìn)行一次操作我們需要去展示操作的結(jié)果，在這里我們有了一個問題，我們應(yīng)如何去展示不同的結(jié)果呢？2010-04-04
鼠標(biāo)懸浮在樹組件節(jié)點上展示當(dāng)前節(jié)點名稱的三種實現(xiàn)方式
這篇文章主要介紹了鼠標(biāo)懸浮在樹組件節(jié)點上展示當(dāng)前節(jié)點名稱的三種實現(xiàn)方式,第一種是使用css樣式設(shè)置,第二種在checkBox綁定,第三種使用tooltip,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-12-12
這篇文章主要為大家介紹了JS表單提交中onsubmit事件return的作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)走馬燈效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03