微信小程序商品购物界面

最新推荐文章于 2023-06-14 19:34:51 发布
最新推荐文章于 2023-06-14 19:34:51 发布
阅读量1.8k 收藏 17
点赞数
分类专栏： 微信 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hy3528/article/details/103537507
版权

wxml代码

<view class="page">
  <view class="page__bd">
    <view class="weui-tab">
      <view class="weui-navbar">
        <block wx:for="{{tabs}}" wx:key="*this">
          <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
            <view class="weui-navbar__title">{{item}}</view>
          </view>
        </block>
        <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
      </view>
      
      <view class="weui-tab__panel">
      <!-- 左边栏 -->
        <view class="navigation">
          <scroll-view scroll-y="true" style="height:100%;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
            <view class="zong">
              <view wx:for="{{tabitem}}" wx:key="index" class="item-text {{tabIndex===index?'activity':''}}" bindtap="setTab" data-index="{{index}}">{{item.title}}
              </view>
            </view>
            <view style="width:100%;height:300rpx;"></view>
          </scroll-view>
        </view>
        <!-- 左边栏 end-->

        <!-- 右边内容 -->
        <view class="content">
          <scroll-view scroll-y="true" style="height:100%;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
           <image mode="widthFix" class="topimg" src="https://cdn-px-output.suoluomei.cn/hplshop/Public/upload/swiper/72/2019/03-15/1552640231_970045.png"></image>
           <!-- 商品 -->
           <view class="contentnext">
            <view class="product" wx:for="{{product}}" wx:key="this.index" data-id="{{item.id}}" bindtap="productClick">
              <image mode="widthFix" class="productimg" src="{{item.img}}"></image>
              <text>{{item.text}}</text>
            </view>
           </view>
           <!-- 商品 end-->
            <view style="width:100%;height:200rpx;"></view>
          </scroll-view>
        </view>
        <!-- 右边内容 end-->
      </view>


    </view>
  </view>
</view>

wxss代码：(@import “…/…/utils/weui”; 是从外部引入的wxss，代码在最下方)

@import "../../utils/weui";

.zong {
  display: flex;
  flex-direction: column;
}
/* .weui-tab__panel{
  display: flex;
  justify-content: space-between;
} */
.weui-navbar__item.weui-bar__item_on {
  color: #ff98be;
}

.weui-navbar__slider {
  background-color: #ff98be;
}

.item-text {
  width: 100%;
  height: 120rpx;
  background: #fff;
  text-align: center;
  line-height: 120rpx;
  background: #eee;
  font-size: 24rpx;
}

.item-text.activity {
  background: #ff98be;
  color: #fff !important;
  border-color: #fe7ca9;
}

.navigation {
  width: 25%;
  height: 100%;
  /* top: 102rpx; */
  position: fixed;
  background-color: #eee;
}
.content{
  width: 74%;
  height: 100%;
  position: fixed;
  left: 26%;
}
.topimg{
  width: 100%;
}
.contentnext{
  width: 100%;
  display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
  }
.product{
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top:30rpx;
}
.productimg{
  width: 100%;

}
.product text{
  margin-top:15rpx;
  font-size: 26rpx;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

js代码

// pages/product/product.js
var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs: ["护肤品", "周边好物"],
    tabitem: [{
        id: 0,
        title: "新品套装"
      },
      {
        id: 1,
        title: "洁面乳"
      },
      {
        id: 2,
        title: "精华乳"
      },
      {
        id: 3,
        title: "乳液"
      },
      {
        id: 4,
        title: "隔离防晒"
      },
      {
        id: 5,
        title: "爽肤水"
      },
      {
        id: 6,
        title: "眼部护理"
      },
      {
        id: 7,
        title: "面膜"
      },
      {
        id: 8,
        title: "面霜"
      },
      {
        id: 9,
        title: "卸妆"
      },
      {
        id: 10,
        title: "单品"
      }
    ],
    
    tabIndex: 0,
    activeIndex: 0, //默认选中第一个navbar标签
    sliderOffset: 0,
    sliderLeft: 0,
    product:[
      {
        id:1,
        img:"https://cdn-px-output.suoluomei.cn/hplshop/Public/upload/original_list_img_pic/72/2019/06-13/1560414343_755578.png",
        text:"清爽型高保湿套装"
      },
      {
        id: 2,
        img: "https://cdn-px-output.suoluomei.cn/hplshop/Public/upload/goods/72/2019/03-22/1553239804_784978.png",
        text: "超时空紧致抗衰套装"
      },
      {
        id: 3,
        img: "https://cdn-px-output.suoluomei.cn/hplshop/Public/upload/original_list_img_pic/72/2019/06-13/1560414343_755578.png",
        text: "清爽型高保湿套装"
      },
      {
        id: 4,
        img: "https://cdn-px-output.suoluomei.cn/hplshop/Public/upload/goods/72/2019/03-22/1553239804_784978.png",
        text: "超时空紧致抗衰套装"
      },
      {
        id: 5,
        img: "https://cdn-px-output.suoluomei.cn/hplshop/Public/upload/original_list_img_pic/72/2019/06-13/1560414343_755578.png",
        text: "清爽型高保湿套装"
      },
      {
        id: 6,
        img: "https://cdn-px-output.suoluomei.cn/hplshop/Public/upload/goods/72/2019/03-22/1553239804_784978.png",
        text: "超时空紧致抗衰套装"
      },
      {
        id: 7,
        img: "https://cdn-px-output.suoluomei.cn/hplshop/Public/upload/original_list_img_pic/72/2019/06-13/1560414343_755578.png",
        text: "清爽型高保湿套装"
      },
      {
        id: 8,
        img: "https://cdn-px-output.suoluomei.cn/hplshop/Public/upload/goods/72/2019/03-22/1553239804_784978.png",
        text: "超时空紧致抗衰套装"
      }
    ],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
        });
      }
    });
  },
  setTab: function(e) {
    console.log(e.currentTarget.dataset.index)
    this.setData({
      tabIndex: e.currentTarget.dataset.index,
    })

  },

  tabClick: function(e) {
    this.setData({
      sliderOffset: e.currentTarget.offsetLeft,
      activeIndex: e.currentTarget.id
    });
    console.log(e.currentTarget.id)
  },
//点击商品执行此事件
  productClick:function(e){
    console.log(e.currentTarget.dataset.id)
    let id = e.currentTarget.dataset.id
    //页面跳转
    wx.navigateTo({
      url: '../hepulan/hepulan?id='+id + "&dab=" + "哈哈",//传参数到需要跳转的页面（第一个参数用？，后面参数都使用&dab）
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

weui.wxss代码
这是微信官方的基础样式库中的内容，感兴趣的可以去搜索

/*!
 * WeUI v1.1.1 (https://github.com/weui/weui-wxss)
 * Copyright 2017 Tencent, Inc.
 * Licensed under the MIT license
 */
page{line-height:1.6;font-family:-apple-system-font,Helvetica Neue,sans-serif}icon{vertical-align:middle}.weui-cells{position:relative;margin-top:1.17647059em;background-color:#fff;line-height:1.41176471;font-size:17px}.weui-cells:before{top:0;border-top:1rpx solid #d9d9d9}.weui-cells:after,.weui-cells:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.weui-cells:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.weui-cells__title{margin-top:.77em;margin-bottom:.3em;padding-left:15px;padding-right:15px;color:#999;font-size:14px}.weui-cells_after-title{margin-top:0}.weui-cells__tips{margin-top:.3em;color:#999;padding-left:15px;padding-right:15px;font-size:14px}.weui-cell{padding:10px 15px;position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-cell:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.weui-cell:first-child:before{display:none}.weui-cell_active{background-color:#ececec}.weui-cell_primary{-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.weui-cell__bd{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-cell__ft{text-align:right;color:#999}.weui-cell_access{color:inherit}.weui-cell__ft_in-access{padding-right:13px;position:relative}.weui-cell__ft_in-access:after{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;margin-top:-4px;right:2px}.weui-cell_link{color:#586c94;font-size:14px}.weui-cell_link:active{background-color:#ececec}.weui-cell_link:first-child:before{display:block}.weui-icon-radio{margin-left:3.2px;margin-right:3.2px}.weui-icon-checkbox_circle,.weui-icon-checkbox_success{margin-left:4.6px;margin-right:4.6px}.weui-check__label:active{background-color:#ececec}.weui-check{position:absolute;left:-9999px}.weui-check__hd_in-checkbox{padding-right:.35em}.weui-cell__ft_in-radio{padding-left:.35em}.weui-cell_input{padding-top:0;padding-bottom:0}.weui-label{width:105px;word-wrap:break-word;word-break:break-all}.weui-input{height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em}.weui-toptips{position:fixed;-webkit-transform:translateZ(0);transform:translateZ(0);top:0;left:0;right:0;padding:5px;font-size:14px;text-align:center;color:#fff;z-index:5000;word-wrap:break-word;word-break:break-all}.weui-toptips_warn{background-color:#e64340}.weui-textarea{display:block;width:100%}.weui-textarea-counter{color:#b2b2b2;text-align:right}.weui-cell_warn,.weui-textarea-counter_warn{color:#e64340}.weui-form-preview{position:relative;background-color:#fff}.weui-form-preview:before{top:0;border-top:1rpx solid #d9d9d9}.weui-form-preview:after,.weui-form-preview:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.weui-form-preview:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.weui-form-preview__value{font-size:14px}.weui-form-preview__value_in-hd{font-size:26px}.weui-form-preview__hd{position:relative;padding:10px 15px;text-align:right;line-height:2.5em}.weui-form-preview__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.weui-form-preview__bd{padding:10px 15px;font-size:.9em;text-align:right;color:#999;line-height:2}.weui-form-preview__ft{position:relative;line-height:50px;display:-webkit-box;display:-webkit-flex;display:flex}.weui-form-preview__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d5d5d6;color:#d5d5d6}.weui-form-preview__item{overflow:hidden}.weui-form-preview__label{float:left;margin-right:1em;min-width:4em;color:#999;text-align:justify;text-align-last:justify}.weui-form-preview__value{display:block;overflow:hidden;word-break:normal;word-wrap:break-word}.weui-form-preview__btn{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3cc51f;text-align:center}.weui-form-preview__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #d5d5d6;color:#d5d5d6}.weui-form-preview__btn:first-child:after{display:none}.weui-form-preview__btn_active{background-color:#eee}.weui-form-preview__btn_default{color:#999}.weui-form-preview__btn_primary{color:#0bb20c}.weui-cell_select{padding:0}.weui-select{position:relative;padding-left:15px;padding-right:30px;height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em;border-right:1rpx solid #d9d9d9}.weui-select:before{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;right:15px;margin-top:-4px}.weui-select_in-select-after{padding-left:0}.weui-cell__bd_in-select-before,.weui-cell__hd_in-select-after{padding-left:15px}.weui-cell_vcode{padding-right:0}.weui-vcode-btn,.weui-vcode-img{margin-left:5px;height:2.58823529em;vertical-align:middle}.weui-vcode-btn{display:inline-block;padding:0 .6em 0 .7em;border-left:1px solid #e5e5e5;line-height:2.58823529em;font-size:17px;color:#3cc51f;white-space:nowrap}.weui-vcode-btn:active{color:#52a341}.weui-cell_switch{padding-top:6px;padding-bottom:6px}.weui-uploader__hd{display:-webkit-box;display:-webkit-flex;display:flex;padding-bottom:10px;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-uploader__title{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-uploader__info{color:#b2b2b2}.weui-uploader__bd{margin-bottom:-4px;margin-right:-9px;overflow:hidden}.weui-uploader__file{float:left;margin-right:9px;margin-bottom:9px}.weui-uploader__img{display:block;width:79px;height:79px}.weui-uploader__file_status{position:relative}.weui-uploader__file_status:before{content:" ";position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5)}.weui-uploader__file-content{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff}.weui-uploader__input-box{float:left;position:relative;margin-right:9px;margin-bottom:9px;width:77px;height:77px;border:1px solid #d9d9d9}.weui-uploader__input-box:after,.weui-uploader__input-box:before{content:" ";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#d9d9d9}.weui-uploader__input-box:before{width:2px;height:39.5px}.weui-uploader__input-box:after{width:39.5px;height:2px}.weui-uploader__input-box:active{border-color:#999}.weui-uploader__input-box:active:after,.weui-uploader__input-box:active:before{background-color:#999}.weui-uploader__input{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;opacity:0}.weui-article{padding:20px 15px;font-size:15px}.weui-article__section{margin-bottom:1.5em}.weui-article__h1{font-size:18px;font-weight:400;margin-bottom:.9em}.weui-article__h2{font-size:16px;font-weight:400;margin-bottom:.34em}.weui-article__h3{font-weight:400;font-size:15px;margin-bottom:.34em}.weui-article__p{margin:0 0 .8em}.weui-msg{padding-top:36px;text-align:center}.weui-msg__link{display:inline;color:#586c94}.weui-msg__icon-area{margin-bottom:30px}.weui-msg__text-area{margin-bottom:25px;padding:0 20px}.weui-msg__title{margin-bottom:5px;font-weight:400;font-size:20px}.weui-msg__desc{font-size:14px;color:#999}.weui-msg__opr-area{margin-bottom:25px}.weui-msg__extra-area{margin-bottom:15px;font-size:14px;color:#999}@media screen and (min-height:438px){.weui-msg__extra-area{position:fixed;left:0;bottom:0;width:100%;text-align:center}}.weui-flex{display:-webkit-box;display:-webkit-flex;display:flex}.weui-flex__item{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-btn{margin-top:15px}.weui-btn:first-child{margin-top:0}.weui-btn-area{margin:1.17647059em 15px .3em}.weui-agree{display:block;padding:.5em 15px;font-size:13px}.weui-agree__text{color:#999}.weui-agree__link{display:inline;color:#586c94}.weui-agree__checkbox{position:absolute;left:-9999px}.weui-agree__checkbox-icon{position:relative;top:2px;display:inline-block;border:1px solid #d1d1d1;background-color:#fff;border-radius:3px;width:11px;height:11px}.weui-agree__checkbox-icon-check{position:absolute;top:1px;left:1px}.weui-footer{color:#999;font-size:14px;text-align:center}.weui-footer_fixed-bottom{position:fixed;bottom:.52em;left:0;right:0}.weui-footer__links{font-size:0}.weui-footer__link{display:inline-block;vertical-align:top;margin:0 .62em;position:relative;font-size:14px;color:#586c94}.weui-footer__link:before{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #c7c7c7;color:#c7c7c7;left:-.65em;top:.36em;bottom:.36em}.weui-footer__link:first-child:before{display:none}.weui-footer__text{padding:0 .34em;font-size:12px}.weui-grids{border-top:1rpx solid #d9d9d9;border-left:1rpx solid #d9d9d9;overflow:hidden}.weui-grid{position:relative;float:left;padding:20px 10px;width:33.33333333%;box-sizing:border-box;border-right:1rpx solid #d9d9d9;border-bottom:1rpx solid #d9d9d9}.weui-grid_active{background-color:#ececec}.weui-grid__icon{display:block;width:28px;height:28px;margin:0 auto}.weui-grid__label{margin-top:5px;display:block;text-align:center;color:#000;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.weui-loading{margin:0 5px;width:20px;height:20px;display:inline-block;vertical-align:middle;-webkit-animation:a 1s steps(12) infinite;animation:a 1s steps(12) infinite;background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;background-size:100%}.weui-loading.weui-loading_transparent{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E")}@-webkit-keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.weui-badge{display:inline-block;padding:.15em .4em;min-width:8px;border-radius:18px;background-color:#e64340;color:#fff;line-height:1.2;text-align:center;font-size:12px;vertical-align:middle}.weui-badge_dot{padding:.4em;min-width:0}.weui-loadmore{width:65%;margin:1.5em auto;line-height:1.6em;font-size:14px;text-align:center}.weui-loadmore__tips{display:inline-block;vertical-align:middle}.weui-loadmore_line{border-top:1px solid #e5e5e5;margin-top:2.4em}.weui-loadmore__tips_in-line{position:relative;top:-.9em;padding:0 .55em;background-color:#fff;color:#999}.weui-loadmore__tips_in-dot{position:relative;padding:0 .16em;width:4px;height:1.6em}.weui-loadmore__tips_in-dot:before{content:" ";position:absolute;top:50%;left:50%;margin-top:-1px;margin-left:-2px;width:4px;height:4px;border-radius:50%;background-color:#e5e5e5}.weui-panel{background-color:#fff;margin-top:10px;position:relative;overflow:hidden}.weui-panel:first-child{margin-top:0}.weui-panel:before{top:0;border-top:1rpx solid #e5e5e5}.weui-panel:after,.weui-panel:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#e5e5e5}.weui-panel:after{bottom:0;border-bottom:1rpx solid #e5e5e5}.weui-panel__hd{padding:14px 15px 10px;color:#999;font-size:13px;position:relative}.weui-panel__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #e5e5e5;color:#e5e5e5;left:15px}.weui-media-box{padding:15px;position:relative}.weui-media-box:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #e5e5e5;color:#e5e5e5;left:15px}.weui-media-box:first-child:before{display:none}.weui-media-box__title{font-weight:400;font-size:17px;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;word-wrap:break-word;word-break:break-all}.weui-media-box__desc{color:#999;font-size:13px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.weui-media-box__info{margin-top:15px;padding-bottom:5px;font-size:13px;color:#cecece;line-height:1em;list-style:none;overflow:hidden}.weui-media-box__info__meta{float:left;padding-right:1em}.weui-media-box__info__meta_extra{padding-left:1em;border-left:1px solid #cecece}.weui-media-box__title_in-text{margin-bottom:8px}.weui-media-box_appmsg{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-media-box__thumb{width:100%;height:100%;vertical-align:top}.weui-media-box__hd_in-appmsg{margin-right:.8em;width:60px;height:60px;line-height:60px;text-align:center}.weui-media-box__bd_in-appmsg{-webkit-box-flex:1;-webkit-flex:1;flex:1;min-width:0}.weui-media-box_small-appmsg{padding:0}.weui-cells_in-small-appmsg{margin-top:0}.weui-cells_in-small-appmsg:before{display:none}.weui-progress{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-progress__bar{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-progress__opr{margin-left:15px;font-size:0}.weui-navbar{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;z-index:500;top:0;width:100%;border-bottom:1rpx solid #ccc}.weui-navbar__item{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;padding:13px 0;text-align:center;font-size:0}.weui-navbar__item.weui-bar__item_on{color:#1aad19}.weui-navbar__slider{position:absolute;content:" ";left:0;bottom:0;width:6em;height:3px;background-color:#1aad19;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.weui-navbar__title{display:inline-block;font-size:15px;max-width:8em;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.weui-tab{position:relative;height:100%}.weui-tab__panel{box-sizing:border-box;height:100%;padding-top:50px;overflow:auto;-webkit-overflow-scrolling:touch}.weui-search-bar{position:relative;padding:8px 10px;display:-webkit-box;display:-webkit-flex;display:flex;box-sizing:border-box;background-color:#efeff4;border-top:1rpx solid #d7d6dc;border-bottom:1rpx solid #d7d6dc}.weui-icon-search{margin-right:8px;font-size:inherit}.weui-icon-search_in-box{position:absolute;left:10px;top:7px}.weui-search-bar__text{display:inline-block;font-size:14px;vertical-align:middle}.weui-search-bar__form{position:relative;-webkit-box-flex:1;-webkit-flex:auto;flex:auto;border-radius:5px;background:#fff;border:1rpx solid #e6e6ea}.weui-search-bar__box{position:relative;padding-left:30px;padding-right:30px;width:100%;box-sizing:border-box;z-index:1}.weui-search-bar__input{height:28px;line-height:28px;font-size:14px}.weui-icon-clear{position:absolute;top:0;right:0;padding:7px 8px;font-size:0}.weui-search-bar__label{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:3px;text-align:center;color:#9b9b9b;background:#fff;line-height:28px}.weui-search-bar__cancel-btn{margin-left:10px;line-height:28px;color:#09bb07;white-space:nowrap}

效果图
在这里插入图片描述

hy3528
关注
  • 0
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序商城项目（篇8）：购物车页面以及支付页面实现
YanHSama的博客
09-13 7460
效果展示 步骤1：
微信小程序(黑马优购:购物车页面)
jklzbc的博客
03-29 1195
收货人: {{address.userName}}</view><view class="phone">电话: {{address.telNumber}}
微信小程序购物车页面实现
qq_62280810的博客
05-31 6008
3.需要判断商品加入购物车的逻辑：一种是已经存在购物车中，如果再加，数量加一即可；还有是不存在购物车中的。1.先在product_detail下的index.wxml的view标签下添加bindtap。2.对应在js文件夹下写点击事件handleCartAdd:商品加入购物车。4.上面代码优化：可以将上面代码封装为setCartadd。32.商品加入购物车逻辑实现（前端）
微信小程序实现上传多张图片、删除图片
01-19
最近在做微信小程序，遇到上传多张图片到服务器，计算上传图片的张数，并且可以手动删除图片，下面是效果图 效果图： 本来用的是小程序提供的 mp-uploader 上传图片的组件，无奈次组件删除效果不是我想要的，只能用 wx.chooseImage进行上传图片，在使用uplaodFile将图片发送给后台服务器。 下面直接展示代码： wxml: 患者病历<
微信小程序——自定义组件
CJiaJiaLe的博客
05-16 1277
今天我们来手把手教学，微信小程序的自定义组件。现在小程序支持简洁的组件化编程，可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中复用，提高自己代码的可读性，降低自己维护代码的成本！现在我将讲解一个登陆时的文本框的组件，方便以后登陆页面。自定义组件类似与页面，拥有自己的wxml和wxss，所以我们要知道自己的组件是什么样子的。我们要搭建一个类似与下边样式的组件。想清楚页面以后我们将进行第一步...
微信小程序添加数据到数据库中
qq_47997447的博客
09-30 2513
在一个事件函数中 //stu是一个数据库的名称 const db = wx.cloud.database() conststu=db.collection('student') //添加一个data数据到stu数据库中 stu.add({ data:{ //获取输入的内容 name:this.data.name, age:parseInt(this.data.age), sex:this.data.sex ...
微信小程序之使用vant-3组件Uploader文件上传
栖身星河之中
04-24 4351
效果图： 微信小程序之使用vant-3组件Uploader文件上传1、把vant的weapp包加进来2、在app.json文件里面"usingComponents"加载进来才能使用组件3、开始编写 1、把vant的weapp包加进来 2、在app.json文件里面"usingComponents"加载进来才能使用组件 3、开始编写 wxml代码： <view class="lin-v"> <view class="f-16 w-200">红.
微信小程序，从excel表格复制粘贴后数据录入，以及json转excel格式
Remo_jun的博客
07-06 1035
不是导入，不想用云函数或者npm，仅需对数据表进行一个复制粘贴后格式化成JSON
微信购物商城的微信小程序页面源码
最新发布
05-18
模板描述：微信购物商城 微信小程序。微信购物商城的微信小程序页面源码是使用微信WEB开发者工具开发，亲测可直接运行。该程序包含了详细完整的框架架构结构，从设计上满足了相关应用服务的设计要求，是一款非常值得...
微信小程序-购物商城网站
06-09
在这个“微信小程序-购物商城网站”项目中，我们探讨的是如何利用微信小程序框架来构建一个功能完备的电子商务平台。 首先，我们需要了解微信小程序的基础架构。它基于JavaScript，采用WXML（微信小程序标签语言）...
基于weui的移动商城html5模板
08-08
基于weui开发的一整套移动端商城,包括首页,购物车,订单管理,评价,分类,会员中心等模块，可用于学习参考。
购物商城微信小程序源代码
08-30
【标题】"购物商城微信小程序源代码"是一个用于构建在线购物平台的小程序项目，它提供了完整的前端源码，便于开发者理解和学习如何开发类似的应用。这个小程序利用了微信小程序的开发框架，结合Vue.js的设计思想，为...
微信小程序 仿京东商城页面 仿京东商城购物页面
06-13
在这个项目中，“微信小程序 仿京东商城页面 仿京东商城购物页面”是一个实践教学案例，目的是让学生或开发者通过实际操作学习微信小程序的开发技能，同时了解和模仿京东商城的用户界面设计。 开发微信小程序涉及到...
基于JAVA开发的微信小程序购物商城
03-29
【标题】：“基于JAVA开发的微信小程序购物商城” 在当今数字化时代，移动购物已经成为人们日常生活中不可或缺的一部分。基于JAVA开发的微信小程序购物商城是利用Java技术栈构建的，旨在为用户提供便捷、高效的在线...
微信小程序云开发入门-数据库插入数据（包含批量）
SuperYang的博客
10-21 7738
本文简单介绍了小程序云开发中插入数据以及批量插入数据的常用做法，希望能够给你带来一定的帮助。
微信小程序用 EXCEL 文件大量导入历史数据
qq_20324305的博客
04-17 1038
实现过程思路如下： 1. 用 EXCEL 文件组织好数据，批量上传，一条一条导入； 2. EXCEL 文件要控制好大小，尽量别太大，1M以下为好； 3. 云函数本身对资源的消耗（时间、空间）是有限制的，所以 EXCEL 文件上传后，要分批次提交。循环读取每一行的数据，做成一个任务，插入任务队列，当队列达到一个批次的数量（例如 200 条记录一个批次）提交一次，待一批次执行完成，清空任务队列，控制空间使用，再去组织下一个批次。这样，既能实现一定程度上的任务并发完成，又能控制整体空间消耗。
微信小程序UI框架
zhaoguanghe的博客
10-01 2987
微信小程序UI框架，快速解决微信小程序前端开发。 1.WeUI WXSS WeUI WXSS是腾讯官方UI组件库WeUI的小程序版，提供了跟微信界面风格一致的用户体验。 GitHub地址：https://github.com/Tencent/weui-wxss 2.iView WeApp iView是TalkingData发布的一款高质量的基于Vue.js组件库，而iView w...
WeUI 在小程序中使用
08-03 212
才接触小程序。想找个ui框架。。也不知道咋弄； 下载地址：点击打开链接 将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的根目录下 引入weui.wxss 方式一：在app.wxss内或者需要的页面引入style/weui.wxss。 方式二：在app.wxss内或者需要的页面引入style/wi...
uniapp微信小程序实现《优购商城项目》
qq_64102392的博客
06-14 4340
对于跨平台开发来说，节约成本是最主要的目的，相比较其他框架，觉得uniapp上手的成本是比较低的。
微信小程序在商城购物系统中的应用研究
"这篇论文详细探讨了基于微信小程序的商城购物系统的开发与实现，强调了微信小程序在移动互联网时代的优势，以及如何利用敏捷开发模式、Java、SpringBoot、Mybatis、Vue.js等技术构建系统。" 本文是一篇关于基于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值