啦啦啦,端正態度,開始寫技術博客哼哼~
剛開始練手,準備模仿朝夕日歷的番茄鬧鐘進行語法以及布局練習:
從最簡單的需求開始:點擊分類,下面多一條紅色border表示選中。
在Page中定義一個值tagsSelect,作為選項的參數:
Page({... data: { tagsSelect:0 },...})定義一個方法,來接收選項值的改變,從而改變樣式:
但如果你這么寫,
<view class="{{tagsSelect==6?'active':''}}" bindtap="selectTag(6)">閱讀</view>會出警告:
我們需要給所在的view標簽里加一個自定義屬性 data-index,來傳遞參數:
...<view class="tagsRow"> <view class="{{tagsSelect==1?'active':''}}" data-index="1" bindtap="selectTag">工作</view> <view class="{{tagsSelect==2?'active':''}}" data-index="2" bindtap="selectTag">學習</view> <view class="{{tagsSelect==3?'active':''}}" data-index="3" bindtap="selectTag">思考</view></view>...JS中方法如下,小程序中值的修改都要用setData方法:
...selectTag:function(event){ var $this = this; $this.setData({ tagsSelect:event.target.dataset.index, }) }, ...event.target.dataset.+(自定義屬性名 data-后的名稱)
以上。
PS:第一次寫技術博客很不熟練,拋磚引玉,望各位大大指點~
新聞熱點
疑難解答