推荐文章

小程序使用wxs脚本显示图片

小程序使用wxs脚本显示图片

WXS(WeiXin )是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。服务器一般保存的是图片相对路径,小程序使用WXS脚本将图片的相对路径变为绝对路径。在utils文件夹下,新建“test.wxs”文件module.expts = { ImageUrl: function(path) { var serverurl=https:您的域名 retur
wxs格式化日期显示

wxs格式化日期显示

WXS(WeiXin )是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。注意wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。wxs 与 javript 是不同的语言,有自己的语法,并不和 javript 一致。wxs 的运行环境和其他 javript 代码是隔离的,wxs 中不能调用其他 javript 文件中定义的函数,也不能调用小程序提供的API。wxs 函数不
微信小程序使用iconfont字体图标

微信小程序使用iconfont字体图标

1、登陆Iconfont图标平台,选择需要的图标Iconfont图标平台,是由阿里妈妈MUX倾力打造的矢量图标管理、交流平台。网址:http:www.iconfont.cn2、下载图标3、添加在小程序添加wxss文件在小程序“utils”文件夹下新增“Iconfont.wxss”,将刚刚下载的“iconfont.css”,复制到“Iconfont.wxss”里4、在“app.wxss”里加载“Ic
通过接口生成的小程序二维码

通过接口生成的小程序二维码

接口:适用于需要的码数量极多的业务场景https:api.weixin.qq.comwxagetwxacodeunlimit?access_token=ACCESS_TOKEN获取 access_token 详见文档POST 参数说明 参数类型默认值说明sceneString最大32个可见字符,只支持数字,大小写英文以及部分特殊字符:!#$&()+,:;=?@._~,其它字符请自行编码为合法字符(
小程序使用modal弹窗

小程序使用modal弹窗

wxml:《view class="container" class="znuploadimg"》 《button type="primary"bindtap="modalinput"》modal有输入框《button》 《view》《modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirmtext="提交" canceltext="重置

小程序右悬浮

日期:2018-07-19 点击:1272 来源:PB2.CN

小程序右view悬浮,返回主页,返回顶部

wxss:

.gotop {
  position: fixed;
  right: 10px;
  bottom: 60px;
}
.gotop .box {
  display: flex; /*设置为flex布局*/
  flex-direction: column; /*rows*/
  justify-content: center; /*水平居中*/
  align-items: center;
  background-color: #e9e9e9;
  padding: 8px;
  margin-bottom: 5px;
}
.gotop .box .iconfont {
  font-size: 30rpx;
}
.gotop .box .text {
  font-size: 22rpx;
}


wxml:

<view class='gotop' wx:if="{{showgo}}">
   <view class='box' bindtap='gohome'>
      <view class='iconfont icon-shouye'> </view>
      <view class='text'>首页</view>
    </view>
    <view class='box' bindtap='gotop'>
      <view class='iconfont icon-xiangshangjiantou'> </view>
      <view class='text'>顶部</view>
    </view>
</view>


js:

Page({  
  data: {  
   showgo: false //显示右悬浮 
 },
 onPageScroll: function(e) {
    var that = this;
    //console.log(e); 监听滚动条,大于100显示,小于100隐藏
    if (e) {
      var showgo = e.scrollTop > 100 ? true : false;
      that.setData({
        showgo: showgo
      }) 
   } 
 },
  gohome: function() {
 
  //返回首页
   wx.switchTab({ 
     url: '/pages/index/index',   
 })  
}, 
gotop:function(e){  
  //返回顶部 
   if (wx.pageScrollTo) { 
     wx.pageScrollTo({
        scrollTop: 0
      })   
    } 
 }
})


这篇文档对您是否有帮助?

小程序使用wxs脚本显示图片

小程序使用wxs脚本显示图片

WXS(WeiXin )是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。服务器一般保存的是图片相对路径,小程序使用WXS脚本将图片的相对路径变为绝对路径。在utils文件夹下,新建“test.wxs”文件module.expts = { ImageUrl: function(path) { var serverurl=https:您的域名 retur
wxs格式化日期显示

wxs格式化日期显示

WXS(WeiXin )是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。注意wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。wxs 与 javript 是不同的语言,有自己的语法,并不和 javript 一致。wxs 的运行环境和其他 javript 代码是隔离的,wxs 中不能调用其他 javript 文件中定义的函数,也不能调用小程序提供的API。wxs 函数不
微信小程序使用iconfont字体图标

微信小程序使用iconfont字体图标

1、登陆Iconfont图标平台,选择需要的图标Iconfont图标平台,是由阿里妈妈MUX倾力打造的矢量图标管理、交流平台。网址:http:www.iconfont.cn2、下载图标3、添加在小程序添加wxss文件在小程序“utils”文件夹下新增“Iconfont.wxss”,将刚刚下载的“iconfont.css”,复制到“Iconfont.wxss”里4、在“app.wxss”里加载“Ic
通过接口生成的小程序二维码

通过接口生成的小程序二维码

接口:适用于需要的码数量极多的业务场景https:api.weixin.qq.comwxagetwxacodeunlimit?access_token=ACCESS_TOKEN获取 access_token 详见文档POST 参数说明 参数类型默认值说明sceneString最大32个可见字符,只支持数字,大小写英文以及部分特殊字符:!#$&()+,:;=?@._~,其它字符请自行编码为合法字符(
小程序使用modal弹窗

小程序使用modal弹窗

wxml:《view class="container" class="znuploadimg"》 《button type="primary"bindtap="modalinput"》modal有输入框《button》 《view》《modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirmtext="提交" canceltext="重置