赞
踩
1.最近在自学小程序,发现有很多的小坑,对于有一定编程经验的
小伙伴来说应该是容易上手的
2.接下来就以—水果商城的项目为例来讲讲
后台基于JAVA SSM框架(根据配置文件,dao/mapper包中的接口与xml文件一一对应)+小程序
话不多说——直接上代码
1.index.wxml
<!--index.wxml--> <!-- 主盒子 --> <view class="maxdiv"> <!-- 左盒子 数据json动态显示--> <view class="leftdiv"> <!-- 根据每个类型(type)的数组长度循环 --> <block wx:for="{ {typeValue}}" wx:key="id"> <!-- 改变点击后的样式 拼接上selected--> <view class="leftdiv_items { {selectedNum == item.typeId ? 'selected' : ''}}" bindtap="dianjiLift" data-id="{ {item.typeId }}">{ {item.typeNAme}}</view> </block> <!-- 水果 (静态数据) /*若js中存储的变量值不为1时 class名字则不拼接selected*/ 三元运算符 <view class="leftdiv_items { {selectedNum == 1 ? 'selected' : ''}}" bindtap="dianjiLift" data-id="1">水果</view> 干果 <view class="leftdiv_items { {selectedNum == 2 ? 'selected' : ''}}" bindtap="dianjiLift" data-id="2">干果</view> 蔬菜 <view class="leftdiv_items { {selectedNum == 3 ? 'selected' : ''}}" bindtap="dianjiLift" data-id="3">蔬菜</view> 海鲜 <view class="leftdiv_items { {selectedNum == 4 ? 'selected' : ''}}" bindtap="dianjiLift" data-id="4">海鲜</view> --> </view> <!-- 右盒子 数据json动态显示--> <view class="rightdiv"> <!-- wx:key="id"在循环的时候加上, --> <view wx:if="{ {selectedNum == typeNum}}"> <!-- 根据每个类型的children数组长度循环 --> <block wx:for="{ {typeValue[typeNum-1].children}}" wx:key="id"> <view class="rightdiv_item" > <image src="{ {item.goods_url}}"></image> <text>{ {item.goods_name}}</text> </view> </block> </view> <!-- 水果商品展示区 <view wx:if="{ {selectedNum == 1}}"> <view class="rightdiv_item"> <image src="../../images/shuiguo/橘子.png"></image> <text>橘子</text> </view> <view class="rightdiv_item"> <image src="../../images/shuiguo/草莓.png"></image> <text>草莓</text> <
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。