功能描述：点击tab切换下面的商品信息；滑动下面的商品信息tab也进行切换。 第一步：我们先来说一下上面的tab,tab我们使用scroll-view scroll-x="true" 就可以。 <scroll-view class="cates" scroll-x="true" scroll-with-animation="true" > <block wx:for="{{cates
:style="{marginRight:(index +1 )%3 ==0?'0rpx':'20rpx'}" 我在做项目中会经常使用margin，每行都是三个或者几个，又想让最后一个不设置margin，使用flex布局的话，会有问题， 这种方法可以判断循环的第三个设置单独的属性
wx.ml <view class="con"> <textarea name="" id="" class="inputText" cols="30" rows="10" value="{{inputText}}" placeholder="（选填）留下您的评语吧～" bindinput="
山东大学 软件学院 暑期项目实训 7-24日 研究生管理系统 张瑞阳 1.设计style ，优化出国申请界面 <style> #container{ display:flex; flex-direction: column; align-items: center; justify-content: center; } .apply-card{
微信小程序页面结构和组件练习--音乐播放器 说明： 这个项目旨在练习组件以及页面的设计。页面和交互的实现可能有多种方式，这里只为了对组件和项目的结构进行熟悉了解。后续会有更加完善的项目。由于涉及到mp3外链导入音乐，预览二维码在外链失效时会出错，这里不放预览二维码了；另预览
留言反馈 本节主要讲解留言反馈界面的实现。效果如图16-1所示。 1.布局分析 结构布局分析示意如图16-2所示。 2.功能的实现 .wxml文件代码示例如下： <view class="group"> <view class="group-header">问题描述</view> <view class="group-body"> <textarea placeh
收货地址列表 本节主要讲解收货地址列表界面的实现。效果如图15-5所示。 1.布局分析 结构布局分析示意如图15-6所示。 根据上面的布局分析，我们会产生基础的框架，代码示例如下： <view > <view > <text>测试</text> <text class='right'>18670321728</text> <
场景如上，同时使用flex布局和position：fixed 代码如下 #tabBar{ position: fixed; bottom: 0; .surround{ display: flex; justify-content: space-around; color: rgb(51,51,51); font-size: 20rpx; border-top: 2rpx solid rgba(226,226,226,0.9);
点击续借后出现弹框，如下 思路就是写好这个弹框，给续借这个button绑定一个点击bindtap事件，利用这个事件来控制弹框的显示模式为true/false以达到显示和隐藏的目的 代码如下： wxml： <view class="line"> <button size="mini" class="button1" bindtap="b">续借</button>
<view class='money'> <view style="flex: 1;"> <text class="real-curr">{{currencyed}}</text> <text class="real-price">{{changeAMT(goods.productAttr.price,exc
picker-view自定义时间选择器 官网的自定义时间选择器比较简陋、日期不准 下面是我自己写的一个demo <view class="baseList"> <view class="list clearfix"> <view class="fl listName"><text class="reqIcon">*</text> 参展时间</
在商品展示中，画三角形的出现的也挺多的，左上角的三角标签，又或者对话形式的三角形，带阴影效果等，在此记录下 1、直接添加三角形 <div class="triangleContainer"> <div class="triangleContent"> <div class="triangle"></div> <div class="title&
1. 场景 在小程序开发过程中，请求回来的数据，有时候会带有h5标签，直接展示的话： 会在页面上显示出h5标签 方法：使用 <rich-text mode="{{info}}"> </rich-text> 解析h5标签 现象：解析出的图片、文字等样式需要设置 2. 方法 (1) 使用正则给标签加上类名 (2)
哈喽，大家好，又到周五啦，有木有期待今天的更新呀~今天要教大家的是制作个人中心界面，先上效果图 个人中心.gif 个人中心制作 1. mine.js // pages/mine/mine.js var app = getApp() Page({ data: { userInfo: {}, motto: 'Hello World', // orderItems orde
商品详情页面，仿淘宝页面。 源码链接下载：https://download.csdn.net/download/qq_39404258/11141525 （积分是csdn默认设置的，我也没办法） 先上图： 界面内容有轮播图、商品信息、评论、商品详情，点击选择规格浮现弹窗。 这里为了开发起来方便，只给第二个按钮附上了bindtap。 在app.
