WeChatアプレットは左にスワイプしてリスト項目を削除する効果を実現

WeChatアプレットは左にスワイプしてリスト項目を削除する効果を実現

この記事では、WeChatミニプログラムの具体的なコードを共有し、左にスワイプしてリスト項目を削除する効果を実現しています。具体的な内容は次のとおりです。

効果

写真

WXML

<ビュークラス="コンテナ">
  <!-- 配送先住所-->
  <view class="アドレス">
    <view class="left">
      <view class="icon">
        <画像 src="../../images/address.png"></画像>
      </ビュー>
      <view class="txt-wrap">
        <view class="txt">SOLANA Blue Harbor、北京市朝陽区</view>
      </ビュー>
    </ビュー>
    <view class="right">
      <view class="line"></view>
      <view class="txt">編集</view>
    </ビュー>
  </ビュー>
  <view class="list">
    <view class="item" wx:for="{{list}}" wx:key="index">
      <!-- 製品ヘッダー情報-->
      <view class="head">
        <view class="head-icon" bindtap="selectItem" data-index="{{index}}">
          <image src="{{item.flag ? '../../images/select.png' : '../../images/no-select.png'}}"></image>
        </ビュー>
        <view class="from">
          <view class="left">
            <view class="storeImg">
              <画像 src="../../images/store.png"></画像>
            </ビュー>
            <view class="storeName">{{item.storeName}}</view>
            <view class="arrow">
               <画像 src="../../images/arrow.png"></画像>
            </ビュー>
          </ビュー>
          <view class="right">
            <view class="freight">送料無料</view>
            <view class="coupon">クーポン</view>
          </ビュー>
        </ビュー>
      </ビュー>
      <!-- 製品内容情報 -->
      <view class="cont">
        <view class="wrap"
           bindtouchstart="touchStart"
           bindtouchmove="touchMove"
           データインデックス="{{index}}"
           スタイル="left: -{{item.x}}rpx" />
          <view class="cont-icon">
            <view class="img-wrap" bindtap="selectItem" data-index="{{index}}">
              <image src="{{item.flag ? '../../images/select.png' : '../../images/no-select.png'}}"></image>
            </ビュー>
            <view class="img">
              <画像 src="{{item.imgUrl}}"></画像>
            </ビュー>
          </ビュー>
          <view class="info">
            <view class="name">{{item.name}}</view>
            <view class="specs-wrap">
              <view class="specs">{{item.specs}}</view>
            </ビュー>
            <view class="discount-wrap">
              <view class="discount">{{item.discount}}</view>
            </ビュー>
            <view class="price-wrap">
              <view class="価格">
                <text>￥</text>{{item.price}}}.00</text>
              </ビュー>
              <ビュークラス="num">
                <view class="reduce" bindtap="reduce" data-index="{{index}}">-</view>
                <input class="inp" 
                       タイプ="数値"
                       値="{{item.num}}"
                       最大長="4"
                       bindinput="bindNumInput"
                       bindblur="bindNumBlur"
                       データインデックス="{{index}}"/>
                <view class="add" bindtap="add" data-index="{{index}}">+</view>
              </ビュー>
            </ビュー>
          </ビュー>
          <!-- 右にスワイプして商品を削除します -->
          <view class="del" bindtap="delete" data-index="{{index}}">削除</view>
        </ビュー>
      </ビュー>
    </ビュー>
  </ビュー>
  <!-- すべて選択、合計、決済 -->
  <view class="total">
    <view class="total-icon" bindtap="allSelect">
      <view class="img">
        <image src="{{selectAll ? '../../images/select.png' : '../../images/no-select.png'}}"></image>
      </ビュー>
      <text style="font-size: 26rpx;">すべて選択</text>
    </ビュー>
    <view class="settle">
      <view class="価格">
        合計 <text style="margin: 0 4rpx;">:</text>
        <text style="font-size: 30rpx;font-weight: 800;">¥{{totalPrice}}</text>
      </ビュー>
      <view class="btn" wx:if="{{totalNum > 0}}">
        チェックアウトへ進む<text style="margin-left: 4rpx;">({{totalNum}})</text>
      </ビュー>
      <view class="btn" wx:else>
        チェックアウトへ進む<text style="margin-left: 4rpx;">(0)</text>
      </ビュー>
    </ビュー>
  </ビュー>
</ビュー>

JS

ページ（{
  /**
   * ページの初期データ */
  データ： {
    リスト: [
      {
        id: 1, 
        名前:「Apple/Apple 15.4インチ 2.2GHz MacBook Pro 256G クアッドコア i7 プロセッサ 256G ノートパソコン ノートブック ビジネス オフィス 学生 勉強 自宅 コンピュータ」
        画像URL: '../../images/0.png',
        storeName: 'Wow 公式旗艦店',
        仕様: 「Spot 5788 グレー 10 世代 i7/16G/1T/6G 独立グラフィック カード」、
        割引: '3000円以上のお買い上げで交換'、
        番号: 1,
        価格: '11999'
      },
      { 
        id: 2, 
        名前:「Apple 13インチ MacBook Pro 1.4GHz クアッドコアプロセッサ (Turbo Boost 最大 3.9GHz) 256GB ストレージ Touch Bar および Touch ID」
        画像URL: '../../images/1.png', 
        storeName: 'Wow 公式旗艦店',
        仕様: 「Spot 5749 ホワイト 第10世代 i7/16G/1T」、
        割引: '3000円以上のお買い上げで交換'、
        番号: 1,
        価格: '11245', 
      },
      { 
        id: 3, 
        名前:「Apple 13インチ MacBook Air 1.1GHz デュアルコア Core i3 プロセッサ、Turbo Boost 最大3.2GHz 256GB ストレージ Touch ID」 
        画像URL: '../../images/2.png',
        storeName: 'Wow 公式旗艦店',
        仕様: 「在庫あり第9世代i7/16G/1T/4G独立グラフィックカード」
        割引: '3000円以上のお買い上げで交換'、
        番号: 1,
        価格: '9245'
      },
      { 
        id: 4, 
        名前:「Apple 13インチ MacBook Pro 1.4GHz クアッドコアプロセッサ (Turbo Boost 最大 3.9GHz) 512GB ストレージ Touch Bar および Touch ID」 
        画像URL: '../../images/3.png',
        storeName: 'Wow 公式旗艦店',
        仕様: 「i7/500G/統合グラフィックカード」、
        割引: '3000以上の購入と交換'、
        番号: 1,
        価格: '11499'
      },
      { 
        id: 5, 
        商品名:「【未開封品】Apple 13.3インチ MacBook Pro 512G ノートパソコン 20モデル Touch Bar ID搭載 軽量で持ち運びに便利なビジネスオフィス用ノートパソコン」 
        画像URL: '../../images/4.png',
        storeName: 'Wow 公式旗艦店',
        仕様: 「Spot 5746 ホワイト i5/8G/500G/統合グラフィックス」、
        割引: '3000円以上のお買い上げで交換'、
        番号: 1,
        価格: '14499'
      }
    ]、
    selectAll: false, // すべて選択するかどうか totalNum: 0, // 選択したアイテムの合計数 totalPrice: 0, // 選択したアイテムの合計価格 startX: 0, // 指タッチの初期 X 軸座標 startY: 0 // 指タッチの初期 Y 軸座標 },

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数 (オプション) {
    
  },
  /**
   * ライフサイクル機能 - モニターページ表示 */
  onShow: 関数() {
    this.data.list.forEach((item)=> {
      item.flag = false // フィールドに基づいて項目が選択されているかどうか item.x = 0 // 各リスト項目の相対配置の初期位置})
  },
  // 1つのアイテムを選択し、選択したアイテムの合計価格を計算します selectItem(e) {
    インデックス = e.currentTarget.dataset.index
    flag = this.data.list[index].flag とします。
    if(フラグ == false) {
      this.data.list[インデックス].flag = true
    } それ以外 {
      this.data.list[インデックス].flag = false
    }
    // すべての項目が選択されているかどうかを判定する let bool = this.data.list.every((item) => {
      アイテムを返す.フラグ
    })
    this.setData({
      すべて選択: ブール値、
      リスト: this.data.list
    })
    this.countPrice()
  },
  // 選択したアイテムの数量を減らして合計価格を計算するreduce(e) {
    インデックス = e.currentTarget.dataset.index
    num = this.data.list[index].numとします。
    // 現在の製品数が 1 より大きいかどうかを判断します。1 より大きい場合は、減らすことができます if (num > 1) {
      this.data.list[インデックス].num = num - 1
    }
    this.setData({
      リスト: this.data.list
    })
    this.countPrice()
  },
  // 入力数量bindNumInput(e) {
    val = e.detail.value とします
    インデックス = e.currentTarget.dataset.index
    if(数値(val) == 0) {
      this.data.list[インデックス].num = 1
    } それ以外 {
      this.data.list[index].num = 数値(val)
    }
  },
  // フォーカスを失い、選択されたアイテムの合計価格を計算しますbindNumBlur() {
    this.setData({
      リスト: this.data.list
    })
    this.countPrice()
  },
  // アイテムの数を増やし、選択したアイテムの合計価格を計算します add(e) {
    インデックス = e.currentTarget.dataset.index
    num = this.data.list[index].numとします。
    this.data.list[インデックス].num = num + 1
    this.setData({
      リスト: this.data.list
    })
    this.countPrice()
  },
  // 指の開始座標 touchStart(e) {
    this.data.startX = e.touches[0].clientX;
    this.data.startY = e.touches[0].clientY;
  },
  // スライドリスト項目 touchMove(e) {
    インデックス = e.currentTarget.dataset.index
    // 現在の座標を取得します。let currentX = e.touches[0].clientX;
    currentY = e.touches[0].clientYとします。
    let x = this.data.startX - currentX; //水平移動距離 let y = Math.abs(this.data.startY - currentY); //垂直移動距離、少し左に移動しても許容されます if (x > 35 && y < 110) {
    // 削除するには左にスワイプします this.data.list[index].x = 110; 
      this.setData({
        リスト: this.data.list
      })
    } そうでない場合 (x < -35 && y < 110) {
      //右にスライド this.data.list[index].x = 0; 
      this.setData({
        リスト: this.data.list
      })
    }
  },
  // リスト項目を削除し、合計価格と選択されたすべてのステータスを再計算します delete(e) {
    インデックス = e.currentTarget.dataset.index
    this.data.list.splice(インデックス、1)
    this.setData({
      リスト: this.data.list
    })
    this.countPrice()
  },
  // すべて選択 allSelect() {
    // すべて選択されているかどうかを確認し、選択されている場合はすべて選択解除し、選択されていない場合はすべて選択して合計価格を計算します if(this.data.selectAll) {
      this.data.list.forEach((item)=>{
        アイテムフラグ = false
      })
      this.data.selectAll = false
    } それ以外 {
      this.data.list.forEach((item)=>{
        アイテムフラグ = true
      })
      this.data.selectAll = true
    }
    this.setData({
      すべて選択: this.data.selectAll、
      リスト: this.data.list
    })
    this.countPrice()
  },
  // 選択されたcountPrice()の合計価格を計算します。
    // 選択されたアイテムがあるかどうかを判断します。ある場合は計算します。ない場合は、選択されたアイテム、合計価格、決済されたアイテムの数をすべてクリアします。let bool = this.data.list.some((item) => {
      アイテムを返す.フラグ
    })
    if(ブール) {
      // 再計算するたびに、最後に記録されたデータをクリアします this.data.totalNum = 0 
      this.data.totalPrice = 0
      this.data.list.forEach((item)=>{
        if(item.flag == true) {
          this.data.totalPrice += (item.price * item.num)
          this.data.totalNum += アイテム数
        }
      })
    } それ以外 {
      this.data.totalNum = 0
      this.data.totalPrice = 0
      this.data.selectAll = false
    }
    this.setData({
      合計数: this.data.totalNum、
      合計価格: this.data.totalPrice、
      すべて選択: this.data.selectAll
    })
  }
})

ウィス

ページ {
  背景: #f2f2f2;
}
。容器 {
  幅: 100%;
  パディング下部: 90rpx;
  ボックスのサイズ: 境界線ボックス;
  overflow-y: スクロール;
}
。住所 {
  幅: 100%;
  高さ: 80rpx;
  背景: #fff;
  左下の境界線の半径: 20rpx;
  右下の境界線の半径: 20rpx;
  パディング: 0 30rpx;
  ボックスのサイズ: 境界線ボックス;
  フォントサイズ: 28rpx;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースの間;
  下部マージン: 20rpx;
}
.アドレス .左 {
  フレックス: 1;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
}
.address .left .icon {
  幅: 32rpx;
  高さ: 35rpx;
  右マージン: 8rpx;
}
.address .left .icon イメージ {
  幅: 100%;
  高さ: 100%;
}
.address .left .txt-wrap {
  幅: 0;
  フレックス: 1;
}
.address .left .txt-wrap .txt {
  オーバーフロー: 非表示;
  テキストオーバーフロー: 省略記号;
  空白: ラップなし;
  右パディング: 10rpx;
  ボックスのサイズ: 境界線ボックス;
}
.アドレス .right {
  幅: 80rpx;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
}
.address .right .line {
  幅: 0px;
  高さ: 26rpx;
  左境界線: 4rpx 実線 #bfbfbf;
}
.address .right .txt {
  フレックス: 1;
  テキスト配置: 右;
}

.リスト{
  幅: 100%;
}
.リスト .アイテム {
  幅: 100%;
  境界線の半径: 20rpx;
  パディング: 30rpx 0;
  ボックスのサイズ: 境界線ボックス;
  背景: #ffffff;
  下部マージン: 20rpx;
}

/* 製品ヘッダー情報*/
.リスト .アイテム .ヘッド {
  幅: 100%;
  フォントサイズ: 26rpx;
  パディング: 0 30rpx;
  ボックスのサイズ: 境界線ボックス;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  下部マージン: 20rpx;
}
/* 製品選択アイコン*/
.list .item .head .head-icon {
  幅: 40rpx;
  高さ: 40rpx;
  右マージン: 26rpx;
  境界線の半径: 100%;
  ボックスシャドウ: 0 0 10rpx ライトグレー;
}
.list .item .head .head-icon イメージ {
  幅: 100%;
  高さ: 100%;
}
.list .item .head .from {
  フレックス: 1;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースの間;
}
.list .item .head .from .left {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
}
.list .item .head .from .left .storeImg {
  幅: 26rpx;
  高さ: 26rpx;
  上マージン: -4rpx;
  右マージン: 8rpx;
}
.list .item .head .from .left .storeImg 画像 {
  幅: 100%;
  高さ: 100%;
}
/* 店舗名 */
.list .item .head .from .left .storeName {
  フレックス: 1;
  右マージン: 14rpx;
}
/* 右矢印 */
.list .item .head .from .left .arrow {
  幅: 8rpx;
  高さ: 34rpx;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
}
.list .item .head .from .left .arrow 画像 {
  幅: 100%;
  高さ: 16rpx;
.list .item .head .from .right {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの端揃え: flex-end;
}
/* 送料無料*/
.list .item .head .from .right .freight {
  フォントサイズ: 22rpx;
  色: #1e1e1e;
}
/* クーポン */
.list .item .head .from .right .coupon {
  フォントサイズ: 24rpx;
  パディング: 4rpx 14rpx;
  背景: #ffeded;
  境界線の半径: 20rpx;
  左マージン: 16rpx;
  色: #ffaa7f;
}

/* 製品情報 */
.リスト .項目 .続き {
  幅: 100%;
  オーバーフロー: 非表示;
  フォントサイズ: 26rpx;
}
.list .item .cont .wrap {
  幅: 100%;
  パディング: 0 30rpx;
  ボックスのサイズ: 境界線ボックス;
  ディスプレイ: フレックス;
  コンテンツの配置: flex-start;
  遷移: すべて 0.2 秒;
  位置: 相対的;
  上: 0;
  左: 0;
}
/* 製品のスリック削除ボタン */
.list .item .cont .wrap .del {
  幅: 110rpx;
  高さ: 100%;
  背景: #ffaa7f;
  フォントサイズ: 24rpx;
  色: #fff;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  位置: 絶対;
  上: 0;
  右: -110rpx;
}
.list .item .cont .wrap .cont-icon {
  ディスプレイ: フレックス;
  右マージン: 26rpx;
}
/* 製品の選択または選択解除アイコン*/
.list .item .cont .wrap .cont-icon .img-wrap {
  幅: 40rpx;
  高さ: 40rpx;
  右マージン: 26rpx;
  境界線の半径: 100%;
  ボックスシャドウ: 0 0 10rpx ライトグレー;
  位置: 相対的;
  上: 72rpx;
  左: 0;
}
.list .item .cont .wrap .cont-icon .img-wrap 画像 {
  幅: 100%;
  高さ: 100%;
}
/* 商品画像*/
.list .item .cont .wrap .cont-icon .img {
  幅: 190rpx;
  高さ: 190rpx;
  境界線の半径: 10rpx;
  ボックスシャドウ: 0 0 10rpx ライトグレー;
  オーバーフロー: 非表示;
}
.list .item .cont .wrap .cont-icon .img 画像 {
  幅: 100%;
  高さ: 100%;
}
.list .item .cont .wrap .info {
  フレックス: 1;
  幅: 0;
}
/* 製品名 */
.list .item .cont .wrap .info .name {
  オーバーフロー: 非表示;
  テキストオーバーフロー: 省略記号;
  ディスプレイ: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: 垂直;
  下部マージン: 10rpx;
}
/* 製品仕様 */
.list .item .cont .wrap .info .specs-wrap {
  幅: 100%;
  フォントサイズ: 24rpx;
  右パディング: 12rpx;
  境界線の半径: 18rpx;
  ボックスのサイズ: 境界線ボックス;
  下部マージン: 8rpx;
  オーバーフロー: 非表示;
  テキストオーバーフロー: 省略記号;
  空白: ラップなし;
}
.list .item .cont .wrap .info .specs-wrap .specs {
  表示: インラインブロック;
  背景: #f2f2f2;
  境界線の半径: 18rpx;
  パディング: 4rpx 16rpx 4rpx 16rpx;
  ボックスのサイズ: 境界線ボックス;
}
/* 製品割引 */
.list .item .wrap .wrap .cont .info .discount-wrap {
  幅: 100%;
  フォントサイズ: 24rpx;
}
.list .item .cont .wrap .info .discount-wrap .discount {
  表示: インラインブロック;
  背景: #f2f2f2;
  境界線の半径: 18rpx;
  パディング: 4rpx 20rpx 4rpx 16rpx;
  ボックスのサイズ: 境界線ボックス;
}
/* 商品価格 */
.list .item .cont .wrap .info .price-wrap {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースの間;
  上マージン: 8rpx;
}
.list .item .cont .wrap .info .price-wrap .price {
  フォントサイズ: 36rpx;
  フォントの太さ: 700;
  色: #ffaa7f;
}
.list .item .cont .wrap .info .price-wrap .price テキスト {
  フォントサイズ: 24rpx;
}
/* 商品の数量 */
.list .item .cont .wrap .info .price-wrap .num {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの端揃え: flex-end;
}
.list .item .cont .wrap .info .price-wrap .num .reduce {
  幅: 40rpx;
  フォントの太さ: 800;
  色: #262626;
  テキスト配置: 中央;
  行の高さ: 40rpx;
}
.list .item .cont .wrap .info .price-wrap .num .inp {
  幅: 80rpx;
  高さ: 40rpx;
  最小高さ: 40rpx;
  テキスト配置: 中央;
  背景: #f2f2f2;
  マージン: 0 2rpx;
}
.list .item .cont .wrap .info .price-wrap .num .add {
  幅: 40rpx;
  フォントの太さ: 800;
  色: #262626;
  テキスト配置: 中央;
  行の高さ: 40rpx;
}

/*すべて選択、合計、決済*/
。合計 {
  幅: 100%;
  高さ: 90rpx;
  背景: #fff;
  パディング: 0 20rpx 0 30rpx;
  ボックスのサイズ: 境界線ボックス;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースの間;
  位置: 固定;
  左: 0;
  下部: 0;
  zインデックス: 99;
}
.total .total-icon {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの配置: flex-start;
}
.total .total-icon .img {
  幅: 40rpx;
  高さ: 40rpx;
  右マージン: 14rpx;
  境界線の半径: 100%;
  ボックスシャドウ: 0 0 10rpx ライトグレー;
}
.total .total-icon イメージ {
  幅: 100%;
  高さ: 100%;
}
.合計 .settle {
  フォントサイズ: 24rpx;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの端揃え: flex-end;
}
.合計 .決済 .価格 {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  右マージン: 16rpx;
}
.合計 .決済 .btn {
  高さ: 60rpx;
  背景: #ffaa7f;
  境界線の半径: 30rpx;
  パディング: 0 30rpx;
  ボックスのサイズ: 境界線ボックス;
  フォントサイズ: 24rpx;
  色: #fff;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットが左スワイプで削除効果を実現
  • WeChat アプレットの左スワイプで削除するコード例
  • WeChatアプレットは、配送先住所を削除するために左にスワイプする機能を実装しました
  • WeChatアプレットが左スワイプで削除効果を実現
  • WeChatミニプログラムの左スワイプ削除機能の開発事例を詳しく解説
  • WeChatミニプログラムリストのアイテムを削除するには左にスワイプします
  • WeChatアプレットは左スワイプによる変更と削除機能を実装
  • WeChatミニプログラムスワイプして削除（左にスワイプして削除）
  • WeChatアプレットに左スワイプ削除機能を実装
  • WeChatアプレットの左スワイプ削除効果の実装コード

<<:  Linuxフラッシュのインストール方法

>>:  MySQL の NOT IN 充填ピットの NULL 列の問題の解決方法

推薦する

15行のCSSコードがAppleデバイスをクラッシュさせる可能性があり、最新のiOS 12も例外ではない

たった15行のCSSでiPhoneがクラッシュするWire のセキュリティ研究者 Sabri Had...

React コンポーネント通信ルーティングパラメータ転送 (react-router-dom)

目次最近Reactを勉強していて、今は仕事でVueを使っています。学習の過程で、両者を比較して理解を...

Postman に基づく HTTP インターフェース テスト プロセスの分析

偶然、素晴らしい人工知能のチュートリアルを発見したので、みんなと共有せずにはいられませんでした。この...

Vue+flaskで動画合成機能を実現（ドラッグ＆ドロップアップロード）

目次ドラッグアンドドロップアップロードについては以前の記事で書きました。ファイルをアップロードするF...

crontab でスケジュールされたタスクが実行されない理由の概要

序文最近、仕事でいくつかの問題が発生しました。crontab でスケジュールされたタスクが実行されま...

Ubuntu 18.0.4 MySQL 8.0.20 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.20 のインストールおよび設定方法は、参考としてグラフィック チュートリアルにま...

vue3+TypeScript+vue-routerの使い方

目次使いやすいプロジェクトを作成するvue-cli 作成ヴィートクリエイションvue-routerを...

MySQLシリーズ15 MySQL共通設定とパフォーマンスストレステスト

1. 一般的なMySQLの設定以下のすべての構成パラメータは、32G のメモリを搭載したサーバーに基...

JavaScript 配列の詳細な概要

目次1. 配列誘導1. 文字列を配列に分割する2. コレクションとマップを新しい配列に変換する3. ...

MySQLデータベースを作成し、中国語の文字をサポートする方法

まずMySQLの公式ドキュメントを見てみましょう: 5.7 {データベース | スキーマ} を作成 ...

n 個のコンテナ要素による無限スクロールの実装コード

シナリオ最大 10000 要素のリストを正しくレンダリングする方法。無限ドロップダウン読み込みテクノ...

Mysqlはストアドプロシージャを通じて文字列を配列に分割します

文字列を配列に分割するには、次の 3 つの MySQL 関数を使用する必要があります。 REVERS...

TypeScript を使用して Vue3 で axios をカプセル化する詳細な例

この axios パッケージは、vue3 デモで使用されます。便宜上、element-plus は ...

ミニプログラムは、カスタムのマルチレベル単一選択と複数選択を実装します

この記事では、参考のために、ミニプログラムでカスタムのマルチレベル単一選択および複数選択機能を実装す...

Linux環境でタイムゾーンを設定できない問題を解決

Linuxでタイムゾーンを変更する場合、常に変更することはできませんAsia/Shanghai に変...