簡単な紹介
これは商品がカートやああ~~~非常に単純なを使用して製品リストの数を変更し、主のために、足し算と引き算のデモの数のマイクロチャネルネイティブコードの実装と小さなプログラムです。
コアJSメソッド説明
- addCount（数の増加）
- delCount（数を減らします）
- 同様にgetCount（番号を取得します）
以下に示すような結果を達成するために：
実装手順
1、ページレイアウト
マスターコードを増加させ、ボタンのコンテナを提出count.wxml
<!-- 主容器 -->
<view class="stepper">
<!-- 减号 -->
<text class="sign {{num <= 1 ? 'disabled' : 'normal'}}" bindtap="delCount" data-index="{{index}}">-</text>
<!-- 数值 -->
<input class="number" type="number" bindchange="bindManual" value="{{num}}" disabled="disabled"/>
<!-- 加号 -->
<text class="sign {{num >= 10 ? 'disabled' : 'normal'}}" bindtap="addCount" data-index="{{index}}">+</text>
</view>
<button bindtap="getCount">提交</button>
2、ページスタイルWCSSを追加
count.css
グローバルスタイルを設定します
page {
background: #EDEDED;
}
メインコンテナのスタイルを設定します
/*主容器*/
.stepper {
width:130px;
height: 40px;
/*给主容器设一个边框*/
border: 1rpx solid #818284;
border-radius: 3px;
margin:20px auto;
background: white;
}
/*加号和减号*/
.stepper .sign {
width: 40px;
line-height: 40px;
text-align: center;
float: left;
}
/*数值*/
.stepper .number {
width: 48px;
height: 40px;
float: left;
margin: 0 auto;
text-align: center;
font-size: 16px;
color: #000000;
/*给中间的input设置左右边框即可*/
border-left: 1rpx solid #818284;
border-right: 1rpx solid #818284;
}
/*普通样式*/
.stepper .normal{
color: black;
}
/*禁用样式*/
.stepper .disabled{
color: #ccc;
}
設定ボタンボタンのスタイル
button{
width: 90%;
color: white;
background:#DFB741;
margin:30px auto;
}
3、JSのデータ交換を書きます
デジタルは1に初期化
/**
* 页面的初始数据
*/
data: {
num:1
},
数字を高めるために「+」記号をクリックaddCount
/* 加数 */
addCount: function (e) {
console.log("刚刚您点击了加1");
var num = this.data.num;
// 总数量-1
if (num < 1000) {
this.data.num++;
}
// 将数值与状态写回
this.setData({
num: this.data.num
});
},
「 - 」これは上のクリックをdelCount看板の数を減らします
/* 减数 */
delCount: function (e) {
console.log("刚刚您点击了减1");
var num = this.data.num;
// 商品总数量-1
if (num > 1) {
this.data.num--;
}
// 将数值与状态写回
this.setData({
num: this.data.num
});
},
結果セットを取得しGETCOUNT
getCount: function (e) {
var num = this.data.num;
console.log(num);
wx.showToast({
title: "数量：" + num + "",
})
}
まあ、デモテストは、それについての感じを完了しました！
リマーク
マイクロチャネルのマイクロモールアプレット系列データがhttpsダイナミックで存在を通じて取得され、最初の章から読み始めることをお勧めします。私たちは、それを更新していきます記事のこのシリーズをサポートすることができ、ありがとうございました！どのような提案をあなたはもちろんで前方に置くことができ、我々はヘクタール~~~一緒に勉強します
小型マイクロチャネルマイクロプログラムシリーズモール
マイクロ手紙アプレットマイクロモール：開発者キーを取得し
ます。httpsフレームワークとナビゲーション機能の構築：マイクロ手紙アプレットマイクロモール（a）は
マイクロ手紙をアプレットマイクロモール（2）：電気の供給ホームカルーセル、カテゴリナビゲーションと新しい販売が実装
マイクロ手紙アプレットをマイクロモール（III）：電気の供給ホーム福祉特別無制限のドロップダウンが実現するために、動的APIのデータを更新
、製品の詳細ページを達成するために、動的API（A）：アプレットマイクロモール（D）マイクロ手紙を
マイクロ手紙アプレットマイクロモール（V）：動的なAPIの実装製品の詳細ページ（下）
新しい特売品のフローレイアウトを達成するために、動的API：マイクロチャネルアプレットマイクロモール（VI）
カテゴリー達成するために、動的API：マイクロ手紙アプレットマイクロモール（VII）を
キャッシュ実装商品カート：マイクロ手紙アプレットマイクロモール（VIII）を機能的な
マイクロチャネルのマイクロアプレットモール（IX）：マイクロチャネルの許可および個人センターのページのページ達成
マイクロチャネルマイクロアプレットモール（X）：アドレス管理を出荷するユーザーを