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

接觸js弄了好長時間才出來效果，但是還是覺的不做夢完美，希望有更好的方式進行交流：

雖說這個小功能但是對于我這個新手來說還是有點難;具體代碼如下：

WXML：

[html] view plain copy

最多可增加4個功能入口

{{item.title}}

{{item.sub_title}}

－－>

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

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:"這是一個頁面"

model:[

{

image:'../image/guapai_icon.png',

title:'掛牌',

sub_title:'進行松香交易，松香買賣。。。',

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)點擊的id和i值想等的時候 就把里面的selectImage屬性改為true 其他的改為false,個人感覺這種寫法有一定的缺陷，希望有大牛指正

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

嗨圖功能

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

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

3、立即制作——可以用自己的圖來DIY。

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

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