微信小程序新手教程之js實(shí)現(xiàn)單選功能，本篇默認(rèn)已經(jīng)成功安裝微信小程序工具，來(lái)和小編一起看看吧

接觸js弄了好長(zhǎng)時(shí)間才出來(lái)效果，但是還是覺(jué)的不做夢(mèng)完美，希望有更好的方式進(jìn)行交流：

雖說(shuō)這個(gè)小功能但是對(duì)于我這個(gè)新手來(lái)說(shuō)還是有點(diǎn)難;具體代碼如下：

WXML：

[html] view plain copy

最多可增加4個(gè)功能入口

{{item.title}}

{{item.sub_title}}

－－>

從大的分科分為兩個(gè)大塊一個(gè)是上面的header 剩下的列表是另外一個(gè)部分，列表中又分為若干個(gè)小塊，本打算寫個(gè)模版，但是感覺(jué)這樣更清晰

WXSS：

[css] view plain copy.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：

[javascript] view plain copyPage({

data:{

// text:"這是一個(gè)頁(yè)面"

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){

// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)

},

onReady:function(){

// 頁(yè)面渲染完成

},

onShow:function(){

// 頁(yè)面顯示

},

onHide:function(){

// 頁(yè)面隱藏

},

onUnload:function(){

// 頁(yè)面關(guān)閉

}

})

主要思路為循環(huán)數(shù)組的所有原素，當(dāng)點(diǎn)擊的id和i值想等的時(shí)候 就把里面的selectImage屬性改為true 其他的改為false,個(gè)人感覺(jué)這種寫法有一定的缺陷，希望有大牛指正

下面小編就給大家介紹一種一個(gè)小程序吧

嗨圖功能

1、專題——DIY圖片的模板，點(diǎn)擊可以生成使用，分享到朋友圈。

2、分享墻——用戶上傳的自己DIY作品。

3、立即制作——可以用自己的圖來(lái)DIY。

4、告訴我——告訴產(chǎn)品的改進(jìn)，內(nèi)容的增加。

想要體驗(yàn)怎么制作屬于自己個(gè)性朋友圈照片的用戶，掃一掃下面的二維碼就可以啦!還等什么，趕緊掃碼體驗(yàn)，開(kāi)啟你的嗨圖之旅吧!