阅读量:0
通过搜索页面传入的id,来进行操作(没有接口,都是假数据),页面如下
首先先把页面搭建起来,并进行渲染顶部导航栏已经做过现在就不发了,直接复制就好
页面信息的wxml
<view style="padding-top: {{pageTopHeight}}px;"> <!--轮播图--> <swiper style="background: #fff;padding:30rpx 0rpx 20rpx 0rpx;height:750rpx;width: 100%;" bindchange='onSlideChange'> <swiper-item wx:for="{{list.imgUrls}}" style="height: 400rpx;"> <image style="width: 100%;height: 100%;" src='{{item}}' /> </swiper-item> </swiper> <!--轮播图数字序号--> <view class="num">{{lunboindex}}/{{list.imgUrls.length}}</view> <!--商品信息--> <view style="background-color: #fff;padding:0rpx 20rpx 20rpx 30rpx;"> <view style="color: #fc4442;font-weight: bolder;font-size: 40rpx;"><span style="font-size: 25rpx;">¥</span>{{list.price}}</view> <view style="font-weight: bolder;margin-top: 10rpx;font-size: 30rpx;">{{list.title}}</view> </view> <view class="select_wrap" bindtap="bindViewTab"> <text>请选择:</text> </view> <view class="store_text">门店信息</view> <view style="background-color: #fff;padding: 20rpx;display: flex;"> <view style="flex: 1;text-align: left;"> <view style="display: flex;"> <view> <image style="width: 80rpx;height: 80rpx;" src="/Images/7.png"></image> </view> <view style="margin-left: 15rpx;"> <view>小马乐购</view> <view style="font-size: 14px;color: #999999;">石家庄正定></view> </view> </view> </view> <view style="text-align: right;flex: 1;margin-top: 20rpx;"><image style="width: 40rpx;height: 40rpx;" src="/Images/24gf-phoneLoudspeaker.png"></image></view> </view> <view class="" style="display: flex;background-color: #fff;margin: 20rpx 0;padding: 20rpx;" > <view>用户评论(0)</view> <view style="text-align: right;flex: 1;color: #8a8788;">更多评论></view> </view> <view style="margin: 20rpx 0;"> <view style="background-color: #fff;padding: 20rpx;text-align: center;">产品介绍</view> <view style="height: 4000px;"> <image style="width: 100%;height: 100%;" src="{{list.img}}"></image> </view> </view> </view>
尾部导航栏wxml
<view class="footer" > <view style="flex: 1;margin-top: 20rpx;"> <view><image src="/Images/likefu.png"></image></view> <view>客服</view> </view> <view style="flex: 1;margin-top: 20rpx;"> <view><image src="/Images/shoucang.png"></image></view> <view>收藏</view> </view> <view style="flex: 1;margin-top: 20rpx;" bindtap="wpnumber"> <view><image src="/Images/ligouwuche.png"></image></view> <view >购物车</view> <view class="wp_number">{{jial}}</view> </view> <view class="shopping_cart" style="background-color: #fa8412;border-radius: 50rpx 0rpx 0rpx 50rpx;" bindtap="bindViewTab" > 加入购物车 </view> <view class="shopping_cart" style="background-color: #ec3c20;border-radius: 0rpx 50rpx 50rpx 0rpx;">立即购买</view> </view>
js
data:{ list:[],//数据 lunboindex:1,//轮播图数字序号 } /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //获取全部数据 var list = wx.getStorageSync('tokey') // 获取传过来的id var id = options.id var that=this for(let i=0;i<list.length;i++){ // 遍历一下数据,并把id进行对比,id一样获取数据 if(list[i].id == id){ that.lists = list[i] } that.setData({ list:that.lists,//获取到的值添到data里面 }) }, // 轮播图滑动时触发,当前页索引改变,轮播图数字序号 onSlideChange(e) { this.setData({ lunboindex: e.detail.current + 1//获取到的值添到data里面 }) },
wxss
/* 选择 */ .select_wrap{ background: #fff; margin: 20rpx 0; padding: 20rpx; color: #8e9099; font-size: 14px; } /* 门店 */ .store_text{ background-color: #fff; padding-bottom: 20rpx; border-bottom: 1px solid #f1f1f1; padding: 20rpx; font-size: 16px; } /* 轮播数字 */ .num{ background-color: #fff; position: absolute; right: 30px; margin-top:-50px; padding: 2rpx 5rpx; } /* 尾部 */ .footer{ display: flex; width: 100%; height: 100rpx; background-color: #fff; border-top: 1px solid #f1f1f1; position: fixed; bottom: 0; z-index: 5; padding: 0rpx 30rpx; font-size: 12px; color: #676774; } .footer image{ width: 40rpx; height: 40rpx; } /* 购物车 */ .wp_number{ position: absolute; top:5rpx; margin-left: 30rpx; border: 1px solid #ea4233; border-radius: 100rpx; padding:0rpx 6rpx; font-size: 11px; color:#ea4233; } .shopping_cart{ margin: 10rpx 0; color: #fff; padding: 0 45rpx; font-size: 14px; line-height: 80rpx; }
现在简单的小页面完成了