在微信小程序中,实现菜品列表的样式切换默认是样式一,点击切换样式,实现样式二
以下是一个示例代码,演示在微信小程序中如何实现菜品列表的样式切换:
在项目中我是列举了菜单形式的切换,<view></view>中的内容可更改替换:
在 wxml 文件中:
<view class="container">
<!-- 样式一:左边店家图片,右边店家信息 -->
<view class="style1" wx:if="{{currentStyle === 'style1'}}">
<image src="{{shop.imgUrl}}" class="shop-image"></image>
<view class="shop-info">
<view class="shop-name">{{shop.name}}</view>
<view class="shop-address">{{shop.address}}</view>
</view>
</view>
<!-- 样式二:下方菜品样式 -->
<view class="style2" wx:else>
<view class="shop-name">{{shop.name}}</view>
<view class="shop-address">{{shop.address}}</view>
<view class="menu-title">菜单</view>
<block wx:for="{{menu}}" wx:key="index">
<view class="menu-item">
<image src="{{item.imgUrl}}" class="dish-image"></image>
<view class="dish-name">{{item.name}}</view>
<view class="dish-price">{{item.price}}</view>
</view>
</block>
</view>
<!-- 切换按钮 -->
<view class="toggle-btn" bindtap="toggleStyle">
{{currentStyle === 'style1' ? '切换到样式二' : '切换到样式一'}}
</view>
</view>
在 wxss 文件中:
.container {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
}
.style1 {
display: flex;
align-items: center;
}
.shop-image {
width: 100px;
height: 100px;
margin-right: 10px;
}
.shop-info {
flex: 1;
}
.shop-name {
font-size: 16px;
font-weight: bold;
}
.shop-address {
font-size: 14px;
color: #999;
margin-top: 5px;
}
.style2 {
margin-top: 10px;
}
.menu-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}
.menu-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.dish-image {
width: 80px;
height: 80px;
margin-right: 10px;
}
.dish-name {
flex: 1;
font-size: 14px;
}
.dish-price {
font-size: 14px;
color: #ff5722;
}
.toggle-btn {
background-color: #4caf50;
color: #fff;
padding: 10px;
text-align: center;
border-radius: 5px;
margin-top: 10px;
cursor: pointer;
}
在 js 文件中:
Page({
data: {
currentStyle: 'style1', // 当前样式,默认为样式一
shop: {
imgUrl: '店铺图片地址',
name: '店铺名称',
address: '店铺地址',
},
menu: [
{ imgUrl: '菜品1图片地址', name: '菜品1', price: '10元' },
{ imgUrl: '菜品2图片地址', name: '菜品2', price: '20元' },
{ imgUrl: '菜品3图片地址', name: '菜品3', price: '30元' },
// 其他菜品数据...
],
},
// 切换样式按钮点击事件
toggleStyle: function() {
const { currentStyle } = this.data;
const newStyle = currentStyle === 'style1' ? 'style2' : 'style1';
this.setData({
currentStyle: newStyle
});
}
});
在这个示例中,假设样式一是左边店家图片,右边店家信息的样式,样式二是下方菜品的样式。 shop 对象存储了店家的图片地址、名称和地址。 menu 数组存储了菜品的图片地址、名称和价格。
点击切换按钮时,会调用 toggleStyle 函数,更改 currentStyle 的值,从而改变页面的样式。
可根据实际需求修改示例代码中的图片地址和样式。