微信小程序?qū)崿F(xiàn)單選功能
初次接觸js弄了好長時(shí)間才出來效果,但是還是覺的不做夢完美,希望有更好的方式進(jìn)行交流;實(shí)現(xiàn)效果如下:
雖說這個(gè)小功能但是對于我這個(gè)新手來說還是有點(diǎn)難;具體代碼如下:
WXML:
<view class="backgrout-bj"> <view class="header"> 最多可增加4個(gè)功能入口 </view> <view> <block wx:for="{{model}}"> <view class="model-list" bindtap="selectClick" id="{{index}}"> <view> <image class="middle-img" src="{{item.image}}"></image> </view> <view class="middle-title"> <view><text>{{item.title}}</text></view> <view class="middle-sub"><text>{{item.sub_title}}</text></view> </view> <!--<view hidden="{{item.selectImage}}"> <image src="../image/xuanze.png" class="seletedImage"></image> </view>--> <view wx:if="{{item.selectImage==true}}"> <image src="../image/xuanze.png" class="seletedImage"></image> </view> </view> </block> </view> </view>
從大的分科分為兩個(gè)大塊一個(gè)是上面的header 剩下的列表是另外一個(gè)部分,列表中又分為若干個(gè)小塊,本打算寫個(gè)模版,但是感覺這樣更清晰
WXSS:
.backgrout-bj{ flex-wrap: wrap; } .backgrout-bj .header{ display: block; font-size: 13px; text-align: center; color: orange; padding: 10px; width: 100%; } .model-list{ border-bottom: 1px solid lightgrey; display: flex; align-items: center; } .middle-img{ padding: 10px; width: 70px; height: 70px; display: block; flex: 1; overflow: hidden; } .middle-title{ margin: 10px; display: block; } .middle-sub{ font-size: 14px; color: lightgray; margin-top: 10px; } .seletedImage{ width: 20px; height: 20px; }
可能有些亂,希望大牛糾正;
JS:
Page({ data:{ // text:"這是一個(gè)頁面" model:[ { image:'../image/guapai_icon.png', title:'掛牌', sub_title:'進(jìn)行松香交易,松香買賣。。。', selectImage:false }, { image:'../image/tianjia_maoyi.png', title:'貿(mào)易', sub_title:'根據(jù)需求,快速的為您提供服務(wù)', selectImage:true } ] }, selectClick:function(event){ // this.data.model[event.currentTarget.id].selectImage for(var i = 0; i < this.data.model.length;i++){ if(event.currentTarget.id == i){ this.data.model[i].selectImage = true } else { this.data.model[i].selectImage = false } } this.setData(this.data) }, onLoad:function(options){ // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù) }, onReady:function(){ // 頁面渲染完成 }, onShow:function(){ // 頁面顯示 }, onHide:function(){ // 頁面隱藏 }, onUnload:function(){ // 頁面關(guān)閉 } })
主要思路為循環(huán)數(shù)組的所有原素,當(dāng)點(diǎn)擊的id和i值想等的時(shí)候,就把里面的selectImage屬性改為true 其他的改為false,個(gè)人感覺這種寫法有一定的缺陷,希望有大牛指正。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10JavaScript實(shí)現(xiàn)頁面滾動圖片加載(仿lazyload效果)
網(wǎng)上的很多這樣的效果都是用jQuery的方法,可是如果不用jQuery的站長難道就不能用這種方法了么2011-07-07javascript基礎(chǔ)練習(xí)之翻轉(zhuǎn)字符串與回文
最近在學(xué)習(xí)的時(shí)候到了基礎(chǔ)算法這一章節(jié),讓我對js內(nèi)置對象方法的掌握還有思維邏輯都得到了提升,所借此機(jī)會來寫一寫學(xué)習(xí)心得和總結(jié)。下面這篇文章主要介紹了利用javascript實(shí)現(xiàn)翻轉(zhuǎn)字符串與回文的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-02-02淺談javascript 函數(shù)表達(dá)式和函數(shù)聲明的區(qū)別
javascript中聲明函數(shù)的方法有兩種:函數(shù)聲明式和函數(shù)表達(dá)式.究竟他們用起來有什么區(qū)別呢,今天就本著打破砂鍋問到底的精神,好好來說說這個(gè)讓人神魂顛倒的--函數(shù)聲明。2016-01-01微信小程序之側(cè)邊欄滑動實(shí)現(xiàn)過程解析(附完整源碼)
這篇文章主要介紹了微信小程序之側(cè)邊欄滑動實(shí)現(xiàn)過程解析(附完整源碼),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08短視頻(douyin)去水印工具的實(shí)現(xiàn)代碼
這篇文章主要介紹了市面上短視頻(douyin)"去水印"的工具原來是這樣實(shí)現(xiàn)的,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03