首页 > 小程序教程 > 微信小程序贝思客经典大图展示样式模板制作设计下载

微信小程序贝思客经典大图展示样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下:
一、wxml页面代码如下:
<!--<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <view class="cityselect">
    {{array[index]}}
  </view>
</picker>-->
<view class="m" bindtap="goCake" data-brand="0">
  <image class="mg" src="{{path+'jd.jpg'}}" ></image>
</view>
<view class="m" data-pname="极地牛乳" data-brand="0" catchtap="goDetail">
  <image class="mg-1" src="{{path+'001.jpg'}}" ></image>
  <image class="mg-2" src="{{path+'001.png'}}" style="width: 400rpx;" ></image>
</view>
<view class="m" data-pname="莱茵河莓妖精" data-brand="0" catchtap="goDetail">
  <image class="mg-1" src="{{path+'002.jpg'}}" ></image>
  <image class="mg-2" src="{{path+'002.png'}}" style="width: 400rpx;"></image>
</view>
<view class="m" data-pname="落莓恋曲" data-brand="0" catchtap="goDetail">
  <image class="mg-1" src="{{path+'003.jpg'}}" ></image>
  <image class="mg-2" src="{{path+'003.png'}}" style="width: 450rpx;"></image>
</view>
<view class="m" data-pname="么么哒香芒" data-brand="0" catchtap="goDetail">
  <image class="mg-1" src="{{path+'004.jpg'}}" ></image>
  <image class="mg-2" src="{{path+'004.png'}}" style="width: 350rpx;"></image>
</view>
<view class="m" data-pname="巧克力石板街" data-brand="0" catchtap="goDetail">
  <image class="mg-1" src="{{path+'005.jpg'}}" ></image>
  <image class="mg-2" src="{{path+'005.png'}}" style="width: 350rpx;"></image>
</view>
<view class="m"  catchtap="goCake" data-brand="1">
  <image class="mg" src="{{path+'jz.jpg'}}" ></image>
</view>
<view class="m" data-pname="吉致泡芙" data-brand="1" catchtap="goDetail">
  <image class="mg-3" src="{{path+'j001.jpg'}}" ></image>
</view>
<view class="m" data-pname="吉致牛轧糖(巴旦木味)" data-brand="1" catchtap="goDetail">
  <image class="mg-3" src="{{path+'j002.jpg'}}" ></image>
</view>
<view class="m" data-pname="吉致班戟-草莓抹茶" data-brand="1" catchtap="goDetail">
  <image class="mg-3" src="{{path+'j004.jpg'}}" ></image>
</view>
 
二、wxss样式文件代码如下:
/**index.wxss**/
page{background-color: #fff;}
.cityselect{position: fixed;width: 150rpx;height: 30px;line-height: 30px; font-size: 12pt; z-index: 1000;background-color: #000;text-align: center;box-shadow: 0 0 5px 0 #fff;border:1rpx solid #fff;  border-radius: 15px;opacity: 0.5;left:20rpx;top: 20rpx;color: #fff;}

.m{background-color: #fff;margin: 0 0 20rpx;}
.m .mg{height: 750rpx;width: 750rpx;}
.m .mg-1{height:540rpx;width:100%;}
.m .mg-2{margin: 15rpx 20rpx 45rpx; height: 140rpx;}
.m .mg-3{height:500rpx;width:100%;}


三、js页面代码如下:
//index.js
//获取应用实例
var base = getApp();
Page({
  data: {
    path:base.path.res+"smallexe/index/",
    motto: '你好、贝思客1!',
    userInfo: {},
    array: ['上海', '北京', '杭州', '宁波'],
    index: 0
  },
  goCake: function (e) {
    var brand = e.currentTarget.dataset.brand;
    if(brand&&brand==1){
      base.cake.tab=1;
    }
    wx.switchTab({ url: '../cake/cake' });
  },
  goDetail: function (e) {
    var nm = e.currentTarget.dataset.pname;
    var b = e.currentTarget.dataset.brand;
    wx.navigateTo({
      url: '../cakeDetail/cakeDetail?pname=' + nm+"&brand="+(b||0)
    })
  },
  bindPickerChange: function (e) {
    this.setData({
      index: e.detail.value
    })
  },
  //事件处理函数
  bindViewTap: function () {
    wx.showActionSheet({
      itemList: ['A', 'B', 'C'],
      success: function (res) {
        if (!res.cancel) {
          console.log(res.tapIndex)
        }
      }
    })

    //wx.navigateTo({
    //url: '../socket/socket'
    //})
  },
  onLoad: function () {
    var that = this
    //调用应用实例的方法获取全局数据
    //app.getUserInfo(function (userInfo) {
    //更新数据
    //that.setData({
    //userInfo: userInfo
    //})
    //})

  },
  onPullDownRefresh: function () {
    wx.stopPullDownRefresh()
  },
  onShareAppMessage: function () {
    return {
      title: '贝思客(体验版)',
      desc: '',
      path: '/pages/index/index?id=123'
    }
  }
})

 

模板简介:该模板名称为【微信小程序贝思客经典大图展示样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 18,268次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-14
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
html5 企业网站 响应式 微信文章 微信图片 微信模板 微信公众平台 微信素材 单页式简历模板 自适应
您可能会喜欢的其他模板