本文给大家带来的是微信小程序宏华净水产品图文列表页设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="bgGray">
<view class="productList flex align" bindtap="godetail">
<view class="imgbox item"><image style="" mode="widthFix" src="../../image/ydjl_img@3x.png"></image></view>
<view class="text item">
<view class="title">鱼鹰8号金色版</view>
<view>品牌:盛源阳光</view>
<view>型号SY-98</view>
<view class="price">预定:<b>3000.00</b><small>(原价:4500)</small></view>
</view>
</view><!--productList-->
<view class="productList flex align" bindtap="godetail">
<view class="imgbox item"><image style="" mode="widthFix" src="../../image/ydjl_img@3x.png"></image></view>
<view class="text item">
<view class="title">鱼鹰8号金色版</view>
<view>品牌:盛源阳光</view>
<view>型号SY-98</view>
<view class="price">预定:<b>3000.00</b><small>(原价:4500)</small></view>
</view>
</view><!--productList-->
</view>
|
二、wxss样式文件代码如下:
.bgGray{
min-height: 100%;
display: block;
background: #f0f2f5;
padding-bottom: 10px;
border: 1px solid #ffffff;
}
|
三、js页面代码如下:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
},
godetail:function(){
wx.navigateTo({
url: '../product_detail/product_detail'
})
}
})
|