[微信小程序]物流信息样式加动画效果(源代码附效果图)

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

正文：

效果图片:(信息仅为示例)

<!--pages/order/order_wl.wxml-->
<view class='page_row top'><image class='goods' src='../../images/dsh.png'></image><view class='page_clu logistics'><text>物流公司: {{wuliu.company}}申通快递</text><text>物流单号: {{wuliu.nu}}4326665981311546542</text><text>官方电话: {{wuliu.phone}}95533</text></view>
</view>
<view class='br'></view>
<block wx:for="{{wuliu}}" wx:key="index"><view class='order'><view class='icon {{0==index?"in":"no_in"}}'></view><view class='logistics_centent page_clu'><text>{{item}},发往深圳太远客运中转部</text><text> {{wuliu.phone}}2017-12-11 23:16:12</text></view><view class='on'></view></view>
</block>
<view class='icon no_in'></view>

wuliu: ['已接收', '抵达深圳', '抵达广州'],

/* pages/order/order_wl.wxss */
.goods{margin: 50rpx;height: 150rpx;width: 150rpx;border-radius: 15rpx;
}
.logistics{margin-top: 70rpx;font-size: 28rpx;
}
.br{width: 95%;margin-left: 2.5%;margin-bottom: 30rpx;background: #d0d0d0;height: 1rpx;
}/* 下部分 */
.logistics_centent{position: absolute;left: 100rpx;font-size: 28rpx;color: #666
}
.icon{width: 20rpx;height: 20rpx;background: white;border-radius: 50%;display: inline-block;margin:0rpx 20rpx 0rpx 40rpx;
}
.in{border: 1rpx solid red;animation: my_animation 2s infinite;
}
@keyframes my_animation{100% {  transform: scale(2);  background-color: transparent;  }
}.no_in{border: 1rpx solid #d0d0d0;
}
.on{background: #d0d0d0;height: 100rpx;width: 1px;margin-left: 50rpx;
}

[微信小程序]物流信息样式加动画效果(源代码附效果图)相关推荐

微信小程序：地图导航功能实现完整源代码附效果图，讲解
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一:需求及效果图展示从后端API获取到起始地和目的地的经纬度坐标与地名.用户点击起始地便打开地图展示 ...
微信小程序聊天室前后端源码附效果图和数据库结构图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 122 <!-- <button bindtap='close'>关闭</bu ...
[微信小程序]星级评分和展示(详细注释附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 星级评分分成两种情况: 一:展示后台给的评分数据二:用户点击第几颗星星就显示为几星评分; < ...
微信小程序转发分享打电话功能,完整代码附效果图
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 按钮绑定在页面内发起转发事件onShareApp:(注意这里是button 并且给他设置了open-t ...
【微信小程序】自定义加载动画3
目录效果图配置版本1 版本2 结语效果图配置配置方法参考上一篇文章:[微信小程序]自定义加载动画版本1 Component({behaviors
【微信小程序】自定义加载动画4
目录效果图配置文件结语效果图配置文件配置方法参考上一篇文章:[微信小程序]自定义加载动画组件源代码: Component({behaviors: [],properties: {
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
Android 仿微信小程序开屏页加载loading
Android 仿微信小程序开屏页加载loading 废话不多说,先上效果图~ 首先就是底层有一个灰色的圆,然后按照圆形的轨迹进行绘制. 啊~说那么多也没用,还是直接上代码吧,哈哈哈哈绘制底部圆形及 ...
微信小程序实现滑动翻页效果源码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果效果图: 源码: <view class="mainFra ...

[微信小程序]物流信息样式加动画效果(源代码附效果图)

承接微信小程序开发。扫码加微信。

正文：

[微信小程序]物流信息样式加动画效果(源代码附效果图)相关推荐

最新文章

热门文章