微信小程序动态设置央视

Posted 2023-04-22

参考技术A 一、wx.setNavigationBarTitle
1.设置整个小程序通用标题，在app.json里设置：

"window":
"navigationBarTitleText": "默认标题"

复制
2.单独设置页面标题，在对应页面json文件里设置（子页面设置会覆盖通用设置）：


"navigationBarTitleText": "首页"

复制
3.动态设置，比如说：我们从接口拿到商品名称后，把商品名称设置到标题上

wx.request(
url: "请求接口url",
method: "POST",
data: ,
success: function (res)
if (res.data.code == 200)
// 修改navigationBarTitleText
wx.setNavigationBarTitle(
title: goods_name
)


)
复制

tips：动态设置 > 页面独立设置 > 通用设置

效果图：
当然，另外我们可以通过点击事件来动态设置标题：

test: function ()
wx.setNavigationBarTitle(
title: "我是点击后的标题"
)

复制
效果图：
二、wx.setNavigationBarColor
设置页面导航条颜色

wx.setNavigationBarColor(
frontColor: '#ffffff',
backgroundColor: '#ff0000',
animation:
duration: 400,
timingFunc: 'easeIn'

)
复制
frontColor：前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
backgroundColor：背景颜色值，有效值为十六进制颜色
animation：动画效果
①animation的结构包括：duration，timingFunc；
②timingFunc：linear（动画从头到尾的速度是相同的），easeIn（动画以低速开始），easeOut（动画以低速结束），easeInOut（动画以低速开始和结束）
效果图：
三、wx.showNavigationBarLoading和wx.hideNavigationBarLoading
wx.showNavigationBarLoading：在当前页面显示导航条加载动画
wx.hideNavigationBarLoading：在当前页面隐藏导航条加载动画
index.wxml

<button bindtap="showLoading">显示加载动画</button>
<button bindtap="hideLoading">隐藏加载动画</button>
复制
index.js

// 显示加载动画
showLoading: function ()
wx.showNavigationBarLoading()
,
// 隐藏加载动画
hideLoading: function ()
wx.hideNavigationBarLoading()

复制
效果图：
四、wx.hideHomeButton
隐藏返回首页按钮。微信7.0.7版本起，当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。

微信小程序实现无限滚动列表(滚动新闻动态列表)

本文实例为大家分享了微信小程序实现无限滚动列表的具体代码，供大家参考，具体内容如下

实现方式是利用小程序原声组件swiper，方向设置为纵向 ：vertical=‘true\'设置同时显示的滑块数量：display-multiple-items=‘4\'设置自动轮播：autoplay：‘true\'.

话不所说，直接上代码：

<!-- 底部排名 -->
  <view class=\'contentBottom\'>
    <view class=\'BottomFirst\'>
      <text id=\'0\' data-id=\'0\'>获奖名单</text>
    </view>
    <swiper class="tab-right" style=\'background:{{bgColor}};\' vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items=\'4\'>
      <view class="right-item">
        <block wx:for-index="idx" wx:for=\'{{aa}}\'>
          <swiper-item>
            <view class=\'content-item\'>
              <text class=\'name\'>{{item.nickName}}</text>
              <text class=\'wawa\'>获得奖金{{item.reward}}元</text>
            </view>
          </swiper-item>
        </block> 
         
      </view>
    </swiper>
  </view>

 

 

 

/* 底部滚动列表 */
.contentBottom {
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #f8e1da;
}
.BottomFirst {
  width: 90%;
  display: flex;
  justify-content: space-around;
  border: 1px solid #663a83;
  box-sizing: border-box;
  margin: 0 auto;
}
.BottomFirst text {
  width: 100%;
  text-align: center;
  font-size: 30rpx;
  color: #663a83;
  line-height: 60rpx;
  border-right: 1px solid #663a83;
  box-sizing: border-box;
}
.BottomFirst text:nth-child(1){
  border: none;
}
.tab-right {
  width: 90%;
  margin: 20rpx auto;
  height: 405rpx;
}
.right-item {
  padding: 0 20rpx;
  background: #fbeeed;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.content-item {
  height: 100rpx;
  border-bottom: 1px solid #ede1d4;
  width: 95%;
}
.avater {
  height: 50rpx;
  width: 50rpx;
  border-radius: 100rpx;
  margin-top: 25rpx;
  float: left;
}
.name {
  font-size: 26rpx;
  float: left;
  line-height: 100rpx;
  color: #b0aaa9;
  margin-left: 20rpx;
  width: 40%;
  height:100%;
  overflow: hidden;
}
.wawa {
  font-size: 26rpx;
  float: right;
  line-height: 100rpx;
  color: #999;
}

 

 

 

data:{
  aa:[
      {
        nickName:"wang",
        reward:"2"
      },
      {
        nickName: "wang",
        reward: "2"
      },
      {
        nickName: "wang",
        reward: "2"
      },
      {
        nickName: "wang",
        reward: "2"
      },
      {
        nickName: "wang",
        reward: "2"
      },
      {
        nickName: "wang",
        reward: "2"
      },
      {
        nickName: "wang",
        reward: "2"
      },
      {
        nickName: "wang",
        reward: "2"
      },
      {
        nickName: "wang",
        reward: "2"
      },
      {
        nickName: "wang",
        reward: "2"
      },
    ],
}

 

 

 

 

 

转： https://www.jb51.net/article/150116.htm