微信小程序新手教程之js实现单选功能

微信小程序新手教程之js实现单选功能，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧

接触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:'贸易',

sub_title:'根据需求，快速的为您提供服务',

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为页面跳转所带来的参数

},

onReady:function(){

// 页面渲染完成

},

onShow:function(){

// 页面显示

},

onHide:function(){

// 页面隐藏

},

onUnload:function(){

// 页面关闭

}

})

主要思路为循环数组的所有原素，当点击的id和i值想等的时候 就把里面的selectImage属性改为true 其他的改为false,个人感觉这种写法有一定的缺陷，希望有大牛指正

下面小编就给大家介绍一种一个小程序吧

嗨图功能

1、专题——DIY图片的模板，点击可以生成使用，分享到朋友圈。

2、分享墙——用户上传的自己DIY作品。

3、立即制作——可以用自己的图来DIY。

4、告诉我——告诉产品的改进，内容的增加。

想要体验怎么制作属于自己个性朋友圈照片的用户，扫一扫下面的二维码就可以啦!还等什么，赶紧扫码体验，开启你的嗨图之旅吧!