精华内容
下载资源
问答
  • 商品展示 代码书写 <!--pages/goods2/goods2.wxml--> <text>pages/goods2/goods2.wxml</text> <view class='list'> <block wx:for='{{dataList}}' wx:key='list' wx:for-item="item"&...

    商品展示

    在这里插入图片描述

    代码书写
    <!--pages/goods2/goods2.wxml-->
    <text>pages/goods2/goods2.wxml</text>
    <view class='list'>
      <block wx:for='{{dataList}}' wx:key='list' wx:for-item="item">
      <view class="list_item">
          <navigator url='details?id={{item.goods_id}}'>
          <view class='img'>
            <image src="{{imghref}}{{item.goods_img}}"  mode="scaleToFill"/>
          </view>
          <view class='info'>
            <view class='title'>{{item.goods_title}}</view>
            <view class='price'>¥{{item.goods_price}}</view>
            <view class='num'>销量{{item.goods_xiaoliang}}</view>
          </view>
           </navigator>
          <view class='clear'></view>
      </view>
      </block>
    </view>
    
    /* pages/goods2/goods2.wxss */
    .clear{
      clear: both;
      overflow: hidden;
    }
    navigator{
      display:inline;
    }
    .list{
      margin-top:10px;
    }
     
    .list .list_item{
      margin-top:10px;
      padding:10px;
      height:100px;
      border-bottom:1px solid #E8E8E8;
    }
    .list .list_item .img{
      float:left;
      width:40%;
      height:100%;
    }
    .list .list_item .img image{
       width:100%;
       height:100%;
    }
     
    .list .list_item .info{
      width:59%;
      float:right;
      height:100px;
      position:relative;
    }
    .list .list_item .info .title{
      color:#333;
      margin-left:10px;
      font-size: 15px;
    }
     
    .list .list_item .info .price{
      color:#FF2727;
      margin-left:10px;
      margin-top:10px;
      font-size:15px;
    }
     
    .list .list_item .info .num{
      position: absolute;
      left:0px;
      bottom:10px;
      color:#747474;
      margin-left:10px;
      font-size:15px;
    }
    
    // pages/goods2/goods2.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        dataList: [{
          goods_id: 1,
          goods_title: '商品标题1',
          goods_img: 'url',
          goods_xiaoliang: '0',
          goods_price: '60'
        }, {
          goods_id: 1,
          goods_title: '商品标题2',
          goods_img: 'url',
          goods_xiaoliang: '0',
          goods_price: '70'
        }, {
          goods_id: 1,
          goods_title: '商品标题3',
          goods_img: 'url',
          goods_xiaoliang: '0',
          goods_price: '80'
        }, {
          goods_id: 1,
          goods_title: '商品标题4',
          goods_img: 'url',
          goods_xiaoliang: '0',
          goods_price: '90'
        }, {
          goods_id: 1,
          goods_title: '商品标题5',
          goods_img: 'url',
          goods_xiaoliang: '0',
          goods_price: '110'
        }],
      }
    })
    
    展开全文
  • 小程序 | 微信小程序实现商品分类列表

    小程序 | 微信小程序实现商品分类列表

    一、效果展示

    在这里插入图片描述


    二、代码实现

    <!-- wxml -->
    <view class="container">
    <!-- 商品列表 -->
    	<view class="cate">
    		<!-- 左侧导航 -->
    		<scroll-view scroll-y class="nav-left">
    			<view 
    				wx:for="{{List}}"
    				wx:key="this"
    				class="nav-left-item {{currentIndex_L == index ? 'L-item-active' : ''}}" 
    				bindtap="bindleLeftItemTap" 
    				data-index="{{index}}" >
    				<text class="nav-left-item-txt {{currentIndex_L == index ? 'L-i-txt-active' : ''}}">{{item.LeftName}}</text>
    			</view>
    		</scroll-view>
    		<!-- 右侧导航 -->
    		<scroll-view scroll-y scroll-top="{{scrollTop}}" class="nav-right">
    			<view 
    				wx:for="{{List[currentIndex_L].RightList}}"
    				wx:key="this"
    				class="nav-right-item"
    				bindtap="bindleRightItemTap" 
    				data-index="{{index}}">
    				<text class="nav-right-item-txt {{currentIndex_R == index ? 'R-i-txt-active' : ''}}">{{item.RightName}}</text>
    				<view class="{{currentIndex_R == index ? 'image-select' : ''}}">
    					<image wx:if="{{currentIndex_R == index}}" class="item-select" src="../icon/Hook_icon.png"/>
     				</view>
    			</view>
    		</scroll-view>
    	</view>
    	<view class="pd32 btn-find">
    		<view bindtap="toDetail">
    			<view class="btn-big">查看详情</view>
    		</view>
    	</view>
    </view>
    
    // js
    // 假数据
    let List = [
    	{
    		"LeftId": 1,
    		"LeftName": "分类1",
    		"RightList": [
    		{
    			"RightId": 11,
    			"RightName": "商品11"
    		},
    		]
    	},
    	{
    		"LeftId": 2,
    		"LeftName": "分类2",
    		"RightList": [
    		{
    			"RightId": 21,
    			"RightName": "商品21"
    		},
    		]
    	},
    ]
    
    Page({
    	/**	
    	 * 页面的初始数据
    	 */
    	data: {
    		List : List,
    		selectLeftId : null,
    		selectRightId : null,
    		currentIndex_L : null,
    		currentIndex_R : null,
    		scrollTop : 0
    	},
    	
    	/**
    	 * 左导航点击事件
    	 */
    	bindleLeftItemTap(e) {
    		const {index} = e.currentTarget.dataset;
    		this.setData({
    			currentIndex_L:index,
    			currentIndex_R : null,
    			selectLeftId : this.data.List[index].LeftId,
    			selectRightId : null,
    			scrollTop : 0,
    		}) 
    	},
    
    	/**
    	 * 右导航点击事件
    	 */
    	bindleRightItemTap(e) {
    		const {index} = e.currentTarget.dataset;
    		let index_L = this.data.currentIndex_L;
    		this.setData({
    			currentIndex_R : index,
    			selectRightId : this.data.List[index_L].RightList[index].RightId,
    		}) 
    	},
    
    	/**
    	 * 底部查看详情按钮点击事件
    	 */
    	toDetail(e) {
    		var selectLeftId = this.data.selectLeftId;
    		var selectRightId = this.data.selectRightId;
    
    		if(selectLeftId === null){
    			wx.showToast({
    				title: '请选择一种分类或商品!',
    				icon: 'none',
    				duration: 1500,
    				mask: true
    			});
    			return;
    		}
    		if(selectRightId != null) {
    			wx.navigateTo({
    				url: '/pages/Detail/Detail' + '?' +
    				'selectLeftId=' + selectLeftId + 
    				'&selectRightId=' + selectRightId,
    				});
    			}
    			else {
    				wx.navigateTo({
    				url: '/pages/Detail/Detail' + '?' +
    				'&selectLeftId=' + selectLeftId,
    			});
    		}	
    	},
    })
    
    展开全文
  • 微信小程序:block制作动态商品列表 在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表。 运行截图 实现代码 js: Page({ data: { ...

    微信小程序:block制作动态商品列表

    在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表。

    运行截图

    在这里插入图片描述

    实现代码

    js:

    Page({
      data: {
        showData:null
      },
      onLoad:function(){
      //使用的时候仅需替换调参数和里面的值即可
        var showData=[
          { goods_name: "商品名称",store_img_url: '../images/store_img.jpg', goods_img_url: '../images/goods_img.png', introduce: "商品购买介绍", sell_price: "商品售价",saled_num:50.0},
          { goods_name: "电视机",store_img_url: '../images/store_img.jpg', goods_img_url: '../images/goods_img.png', introduce: "五彩缤纷", sell_price: "2200",saled_num:29.0},
          { goods_name: "电冰箱",store_img_url: '../images/store_img.jpg', goods_img_url: '../images/goods_img.png', introduce: "很冷很冷", sell_price: "1800",saled_num:90.0},
          { goods_name: "自行车",store_img_url: '../images/store_img.jpg', goods_img_url: '../images/goods_img.png', introduce: "跑得快", sell_price: "800",saled_num:40.0},
          { goods_name: "钢笔",store_img_url: '../images/store_img.jpg', goods_img_url: '../images/goods_img.png', introduce: "不耗墨", sell_price: "1800",saled_num:70.0},
          { goods_name: "自行车",store_img_url: '../images/store_img.jpg', goods_img_url: '../images/goods_img.png', introduce: "跑得快", sell_price: "800",saled_num:40.0},
          { goods_name: "钢笔",store_img_url: '../images/store_img.jpg', goods_img_url: '../images/goods_img.png', introduce: "不耗墨", sell_price: "1800",saled_num:70.0}
        ]
        this.setData({
          showData:showData
        })
      },
      //购买按钮点击事件
      buy_click:function(){
        wx.showToast({
          title: '购买成功',
          icon:'success',
          duration:2000
        })
      }
    })
    

    wxml:

    <scroll-view class='content' scroll-y="true" style='height:100%'><!-- 改变height的值便可改变列表高度-->
      <block wx:for="{{showData}}" wx:key="goods_name">
        <view class = "button_item" data-testid="{{item}}"  >
          <button class="goods" data-testid="{{item}}"><!--之所以利用button控件来承载是因为block循环其他控件会产生重叠现象,这里我没有细究-->
            <view class= "goods_head">
              <image class="logo" src = "{{item.store_img_url}}"></image>
            </view>
            <view class="divLine"></view>
            <image class="goods_logo" src = "{{item.goods_img_url}}"></image>
            <text class="goods_name">{{item.goods_name}}</text>
            <text class="introduce">{{item.introduce}}</text>
            <text class="amount">¥{{item.sell_price}}</text>
            <progress class = "goods_progress"  percent="{{item.saled_num}}" color = "#0cc22a" active = "true" ></progress>
            <button class = "btn_goods" bindtap="buy_click">
              <text class = "buy">购买</text>
            </button>
          </button>
        </view>
      </block>
    </scroll-view>
    

    wxss:

    page{
      background: #f5f5f5;
      }
    .content{
      position: absolute;
      top:0rpx;
      left:0%;
      width:100%;
    }
    .button_item{
      top:10rpx;
      left:0%;
      width:100%;
      height: 310rpx;
    }
    .goods{
      top:10rpx;
      left:0%;
      width:90%;
      height: 280rpx;
      background: #fff;
      border-radius: 15rpx;
      box-shadow: 2px 2px 3px #cfcece;
    }
    .goods::after{
      border:0px;
    }
    .goods_head{
      position: absolute;
      top:0rpx;
      left:0%;
      width:100%;
      height: 65rpx;
    }
    .logo{
      position: absolute;
      top:12.5rpx;
      left:5%;
      width:40rpx;
      height: 40rpx;
    }
    .divLine{
      position: absolute;
      background: #E0E3DA;
      top:65rpx;
      width: 91%;
      height:3rpx;
    }
    .goods_logo{
      position: absolute;
      top:90rpx;
      left:5%;
      width:75px;
      height: 75px;
    }
    .goods_name{
      position: absolute;
      top:70rpx;
      left:30%;
      width:40%;
      height: 80rpx;
      font-size: 15px;
      text-align: left;
      display:-webkit-box;
      -webkit-line-clamp:1;
      overflow:hidden;
      text-overflow:ellipsis;
      -webkit-box-orient:vertical;
      word-break:break-all;
    }
    .introduce{
      position: absolute;
      top:120rpx;
      left:30%;
      width:35%;
      height: 55rpx;
      text-align: left;
      color:rgb(151, 150, 150);
      font-size: 13px;
      overflow:hidden; 
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .amount{
      position: absolute;
      top:180rpx;
      left:30%;
      width:30%;
      height: 55rpx;
      text-align: left;
      color:rgba(185, 20, 20, 0.796);
      font-size: 15px;
    }
    .btn_goods{
      position: absolute;
      top:100rpx;
      right:6%;
      width: 150rpx;
      height: 60rpx;
      background: #67e956;
      z-index: 99999;
    }
    .btn_goods::after{
      border: 0ch;
    }
    .buy{
      position: absolute;
      top:-6rpx;
      right:0%;
      width: 100%;
      color:#fff;
      text-align: center;
      font-size: 13px;
    }
    .goods_progress{
      position: absolute;
      top:185rpx;
      right:6%;
      width: 150rpx;
      height: 6rpx;
      font-size: 8px;
      border-radius: 15px;
    }
    

    从动态生成的商品列表出发,其他列表的生成只需要改变样式以及参数就可以轻松完成,希望这篇文章能够帮助到你哦!!!

    展开全文
  • 微信小程序|Demo】订单结算页面

    千次阅读 2021-07-30 13:35:56
    伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省...

    前言

    Hello!小伙伴!
    非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~
     
    自我介绍 ଘ(੭ˊᵕˋ)੭
    昵称:海轰
    标签:程序猿|C++选手|学生
    简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)
    学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!

    效果展示

    在这里插入图片描述

    Demo代码

    wxml

    在这里插入图片描述

    wxss

    在这里插入图片描述

    结语

    文章仅作为学习笔记,记录从0到1的一个过程

    希望对您有所帮助,如有错误欢迎小伙伴指正~

    可复制粘贴代码见在这里插入图片描述

    展开全文
  • goodsPrice: "66.6" }, { goodsName: "商品4", goodsPrice: "66.6" }, { goodsName: "商品5", goodsPrice: "66.6" }, { goodsName: "商品6", goodsPrice: "66.6" }, { goodsName: "商品7", goodsPrice: ...
  • 1 找到滚动条触底事件 微信小程序官方开发文档寻找 2 判断还有没有下一页数据 1 获取到总页数 只有总条数 总页数 = Math.ceil(总条数 / 页容量 pagesize) 总页数 = Math.ceil( 23 / 10 ) = 3 2 获取到当前的页码 ...
  • 属性:mode="widthFix" <image class="imgsa" src="/img/3.png" mode="widthFix"></image>
  • 最近发先我们ui设计师很喜欢这种瀑布流设计图,在日常开发中,应该会有伙伴需要这样的瀑布流样式布局的商品列表,今天整理出相关的代码,如有需要可自取,效果图如下,如遇问题评论留言。 wxml <!-- 商品...
  • //pages/myRelease/myRelease.jsvar app =getApp();Page({/*** 页面的初始数据*/data: {releases: [],low_mon:0, //降价至now_mon: 0, //现价image: "", //降价图片productID: 0,limit:5,release:false,showMore:...
  • product-model.js: import {Base} from '../../utils/base.js';... //商品详情的显示 getDetailInfo getDetailInfo(id,callBack){ var param = { url:'product/' + id, sCallBack: function(data){
  • 分析:应为小程序只有左右两列,完全没有H5动态计算的必要,直接把商品列表分为奇偶渲染 (index :1 3 5 7 9 11 ...放在左边的大盒子里,index: 2 4 6 8 10 12放在右边大盒子里) 在分别定义左右两列 (放商品的...
  • 项目实现效果如图 项目效果实现思路: wxml页面设计好底部栏《加入购物车,立即购买》 ...写好弹出窗效果 写好原始页面暗化效果 项目实现代码 1、wxml代码 (其中的showModalStatus变量要现在js代码中的data对象中...
  • 那么接下来,创研科技就给大家谈谈,关于外卖点餐微信小程序的详细解决方案。附近门店:通过定位用户所处位置,然后根据距离,或是口碑等,将附近的餐饮门店罗列出来,用户就可以直接从中选择自己心仪的商家,然后...
  • i++){ goodslist.push(data[i]) } this.setData({ goodslist }) } }) { "usingComponents": {}, "navigationBarBackgroundColor": "#3366CC", "navigationBarTitleText": "商品加载", "navigationBarTextStyle": ...
  • } } 通过这个接口,微信小程序就能直接访问调用网站的所有栏目信息,也可以指定调用某个栏目或者子栏目的信息,小程序代码: wx.request({ url: 'https://www.cnzhixiao.wang/api.php?op=get_category', data: { ...
  • 二、showMore如何来定义 page-》data 中定义: showMore: {}, //每个订单中显示全部的详细情况 然后在你获取订单列表处来给 showMore 赋值 //循环 list 用来给 showMore 赋值 t.data.list.forEach((item, index) =>...
  • 该商成包含:首页、分类、拼团、个人中心及相关子页面,您只需申请相关appid填入相关位置即可使用,部分页面截图如下: 下载地址:
  • [1001, "发现栏小程序主入口,「最近使用」列表(基础库2.2.4版本起包含「我的小程序列表)"], [1005, "微信首页顶部搜索框的搜索结果页"], [1006, "发现栏小程序主入口搜索框的搜索结果页"], [1007, "单人...
  • /** 小程序搜索功能用到的 start **/ $title=trim(I('q'));// //dump(I('get.q')); if(!empty($title)){ $where['goods_name']=array('like','%'.$title.'%'); $where['goods_introduce']=array('like','%'.$title....
  • 一、实现思路 ...--商品项--> <navigator class="goods_item" wx:for="{{goodList}}" wx:key="id" > <!--左侧图片容器--> <view class="goods_img_wrap"> <image mode="widthFix" w
  • 微信小程序毕业设计、商城小程序】 该微信小程序商城功能模块包含: 首页、分类、商品详情页面,包含加入购物车、收藏商品商品评论功能、用户登录、微信登录、订单管理、地址管理;完整的购物流程,商品的加入...
  • 大概需要做如下几步: 1.先申请快手开发者 2.在快手任务市场发布任务 3.扫码成功后,进行授权 4.授权后可以直接把微信商品上传到快手小店进行分销 https://www.yonya.net/case/30.html
  • (3)商品库:后台录入商品的相关信息,可以在小程序商品列表里面一个一个点击进去查看商品详细信息;支持通过查询来查找所需要的商品。 (4)商品信息: 点击到商品详情页面,可以查看商品的介绍,查看商品简介、
  • 想要弄个微信小程序弄出来,首先需要梳理思路,明确所需要的小程序功能,对市场进行调研,定位以及后期运营的重要依据和方向。 其次是需要注册小程序账号,确认已认证服务号的公众号通过微信公众号后台快速注册微信...
  • 1.效果图,点击订单列表的"更多",会显示出隐藏的按钮,再次点击"更多"就隐藏 2.wxml 这里是用订单id来判断的 <view class='order-list' wx:for="{{userOrderList}}" wx:key="index"> <view ...
  • 微信原生开发商品分类左右联合滚动 ...类似于喜茶、瑞幸小程序那种商品分类。 .wxml <view class="bottom_menu"> <!--左侧导航栏 --> <scroll-view scroll-y="true" class="scroll_left" show-s
  • 在学微信小程序开发的时候,碰上了一个问题,就是怎么点击一个区域然后跳转到相应的详情页上。。有点类似于从商品页->相应详情页,在查了一些资料之后,我找出一个解决办法,给大家分享一下。 应用举例: ...
  • 微信小程序自定义组件最近在学习鼓捣微信小程序结合 Drupal jsonapi的开发体验,小程序自定义组件与 Angular 的组件很多地方是相通的,或者说本质上是一样的。首先两者之间的父组件可以向子组件传递数据,都需要在子...
  • 左侧导航栏与右侧商品列表相互联动,类似喜茶这种联动效果image.png实现思路:1.使用组件scroll-view的属性scroll-into-view(值应为某子元素id,id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素)...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,666
精华内容 10,666
关键字:

微信小程序商品列表

微信小程序 订阅